Safari 4 text-shadow bug

Safari 4 Beta, the latest release of my favourite browser, has fixed a “bug” that has become a common practice among web professionals.

Text-shadow has been around in the CSS2 spec since 1998, but has had poor support from browser vendors. It’s rise to fame however has been as a workaround for sub-pixel rendering of fonts within Safari.

Safari uses sub-pixel rendering instead of normal anti-aliasing as a part of the Core Graphics framework, which in most cases makes text look sexy, unless you have light text on dark backgrounds.

A workaround was discovered using text-shadow in Safari, which invokes anti-aliasing. This workaround provided a text-shadow offset of 0 and forced anti-aliasing, ensuring text remained legible.

Unfortunately these days are numbered… Safari 4 Beta has removed this option and text again looks bloated and ugly. Luckily Garrett Murray has come to the rescue with a solution for this “bug fix”.

text-shadow: #000 0 -1px 1px;

Obviously substituting #000 for a background colour suitable for that your text is displayed on, alternatively you can use rgba(255,255,255,0.1) as your colour specification for the definition to work on any background colour (I haven’t tested this across all browsers).