Firefox 3: the CSS bugs
A call to web designers out there: noticed any differences in your sites between Firefox 2 and Firefox 3?
Personally, I’ve only seen the infamous outline bug. For those that haven’t experienced it, check Google pagination when clicking a link:
You can fix it though, piece of cake. Just add an a { outline: none; } rule. You’ll find yourself defining outlines more often than ever with Firefox 3.
The other bug is trickier: the new version of Firefox doesn’t seem to like background images. I admit I haven’t researched it much, but it’s a really annoying bug, as it blurs background images for no reason. Others have noticed as well.
To fully understand what I mean, check out the display of the background image live:
…and compare it with the actual image (seen here by right click > view background image):
Really, really annoying bug that one. It seems that Firefox has a problem rendering background images with background rules that also specify positioning. So it does not render well backgrounds defined with something like body { background: url("img/img.jpg") no-repeat top center; }.
It’s minor but irritating. Surely though I can’t go around breaking up my rules in two just because of this hiccup. I guess I’ll have to wait for 3.0.1.
July 8th, 2008 at 9:32 am
I’ll check these problems from home since I don’t have FF3 installed here (work)
They look serious though (specially the background one)…
July 8th, 2008 at 8:45 pm
I believe the image issue is this bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=433640
Which will be fixed in the 3.0.1 coming very shortly.
July 23rd, 2008 at 3:45 am
I’ve got a really bad one that I can’t quite figure out. Go to http://www.ratemystudentrental.com/rental/list
Notice that there is a big gap above the map in FF3. This is the kind of thing I’d expect from IE, not FF.