Safari Crashes on Certain CSS-Generated Content

While doing some design work for a client today, I found a rather peculiar bug in the Safari rendering engine that causes the browser to crash. I’m not sure if this is already a known issue or not, but in either case I’ve developed a short demonstration page to showcase when the bug is present.

In brief, whenever CSS-generated content causes a line to reflow beyond the boundaries of its inline box (that is, whenever the text flows past a single line and on to two or more lines) and is then removed again, Safari’s rendering engine doesn’t know how to handle the situation and crashes the browser. This situation is esoteric enough that most site designs won’t have anything to worry about, but if you are trying to use such an effect in Safari then it’s important to be aware that you may end up crashing your visitor’s browser.

Rather than crash their entire browser (which certainly won’t earn your site any brownie points), hide the offending CSS rule from Safari by using the language pseudo-class filter or similar.

2 replies on “Safari Crashes on Certain CSS-Generated Content”

Comments are closed.