Safari CSS3 Bug :empty Pseudoclass

12 February 2009

Safari CSS3 Bug :empty Pseudoclass
Safari CSS3 Bug :empty Pseudoclass

Imagine the following scenario:

You have some div’s, p’s or any other kind of block element, which, for various reasons - usually because some editor inserts empty paragraphs in the rich text editor - are empty. That would not be a major problem per se (even if it’s an ugly code). But if you have margins and padding asigned to these elements, the layout will be ugly as well. Therefore, you could say that when they’re empty, they should not be displayed. This is accomplished with the css3 :empty pseudoclass. Just declare in the css  file -  div:empty, p:empty {display:none} and you’re done.

Not so for Safari. Safari 3.x (for both Windows and Mac) sometimes will consider ALL div’s and p’s as empty, and you will see a completely empty page. Even more weird, if you want to take a look at the source code for that page, the content will suddenly and miraculously appear!

I did not figure out a fix for this yet. I haven’t detected what triggers it (for instance, this site has the :empty declared for div’s and paragraphs, but they are still viewable in Safari. 

Safari CSS3 Bug :empty Pseudoclass