Safari Crashes When CSS-Generated Content That Reflows A Line Is Removed

Warning: This demo may crash your browser if you are using Safari version <= 2.0.2. Save all your work in all open Safari windows and tabs before trying this for yourself!

Theory

The Safari rendering engine has a bug that causes it to crash the browser when it encounters CSS-generated content (such as through the use of the ::before or ::after pseudo-elements) which is added or removed to a line in a manner which causes the text on that line to reflow (such as when the previously mentioned pseudo-elements are used in conjunction with the :hover pseudo-class).

Affected Versions

This bug was discovered in and tested on Safari version 2.0.2. As the author does not have access to another version, no tests were performed on other versions of Safari. However, it is considered likely that earlier versions are affected as well.

This bug seems to have been fixed in Safari version 2.0.3.

Demonstration

This page is a working example of the bug. In the box below, move your cursor over the link (expand). The middle of the sentence will appear. Then move your cursor off the link. Safari will crash.

With enough text to cause a reflow, Safari will crash (expand) and then removed again.

If you view the source of this page, you'll see that a constrained width was used for the demo, however any combination of properties that would result in the containing element having less space than is necessary to contain a single line of text would also crash Safari. For example, setting margins on either side too high.

Workarounds

The author's best suggestion to avoid this is to filter the rule from Safari using, for instance, the Language Pseudo-Class filter.

This page and demo was created by Meitar Moscovitz on Saturday, December 10th 2005.