Today I Learned

A Hacker News user noticed that zooming on a page crashes their iPhone to the lock screen.

I was curious to see what the actual crashing element was, and narrowed it down to a single div with a CSS animation. I reproduced it on Codepen.

If you zoom in and out of that animated glow on an iOS 14.2 device, you should crash briefly to a black screen and then to the lock screen. I don't think there's any lasting harm, but try at your own peril.

It would be interesting to bisect the animation further to find out the part that is actually responsible of the crash.

I happened across this tweet from @ryanlanciaux where he too had TIL'd that SVGs with HTML embedded inside a foreignObject tag will render when added as a src to an img element.

Here's a Codepen from Ryan with a simple example.

This apparently also works on the new Github profile repos, so could be used for some fun tricks.

As the cachebust=true functionality of the get_url filter is broken in version 0.11 you need to have another way to bust cache on static assets.

A simple way is to add a build time stamp at the end of the asset url: https://domain.com/asset.png?t=timestamp. For example a stylesheet might be included like this

This is not perfect as ideally we only want to bust the cache if the content actually changes but at least we ensure that the visitor does not see stale static files.