In Safari Version 5.0.5 (6533.21.1) on the Mac, using CSS3 to generate multiple columns can lead to truly ugly artifacts if the last line before a column break contains prominent descenders. These are the portions of a lowercase g, j, p, q, or y that project below the “baseline” of your text.
Apparently, for some fonts and column widths, Safari will crop the bottoms off of these letter forms and display them at the top of the next column as if they were projecting down from an otherwise invisible line of text sitting above the actual column in your layout.
This effect can be suppressed by increasing the line height of your text to trigger this “rendered text image wrapping” bug with transparent pixels, which when shuffled to the top of the next column will remain blissfully invisible to your reader.
We have found that a simple css declaration of line-height:2em; did the trick for us. Depending on your choice of fonts and other typographical variable you may need to fiddle with this value to eliminate Safari’s display glitch, which will no doubt be corrected in a future release. Until then, slightly exaggerated vertical line spacing is a small price to pay for the convenience of multiple CSS3 columns.


