I found into this annoying firefox bug at work last week whilst making amends to a page using opacity, transitions and sifr. The page has a slideshow with some some javascript animations and transitions with fade effects. Amending one part of the page led to bugs in another part and it took a while to track down how to solve the problems.
First, sifr headings had to be added to a few panels that had a fading rollover effect. When you rollover, the panel darkens making the text easier to read. But when sifr was added, the heading didn’t render on the page, it just disappeared. And when you mouse over where the text should be, the cursor changed like it would if sifr was displayed properly. Very odd.
After some head scratching, poking about and googling. We found the rollover effect was causing the sifr text to stuff up as the panel had it’s opacity set. Removing the effect led to the text being rendered properly, yay!
But this led to a quirk only in firefox and gecko based browsers! arrggg! We had a hero panel, which fades images in and out to promote certain shows, and was done in jQuery. The problem was that links on other parts of the page were being rendered blurry in firefox 2 and during image changes on the hero panel, the links would flicker. Very annoying.
It took some more poking about and searching to find out what the problem was. This comment by Mark Priestap was enlightening
“I believe there is a bug in FF where if you change the opacity of one part of the page in a hover event, it effects the opacity of page elements elsewhere on the page. It is highly annoying, but is a quirk of FF as far as I can tell.”
Armed with that knowledge, and it looks like it’s a firefox 2 only bug, we set the opacity of all the links on the page to 0.99 using -moz-opacity to target firefox only. Flickering was gone. Job done. This wee bug also affects another of our sites in development.
Another problem I found with sifr was rendering links. Sifr is notorious for misbehaving with links and I have had some experience with how annoying this is.
The link text was rendering, and the rollover effect was working, but when you clicked it, nothing would happen. Searching on the interweb found this on novemberborn.net
Wow, opacity and annoying sifr issues all in a days work, fun…
Things learned:
- Firefox 2 has problems with opacity and rendering things with a hover state.
- Sifr can be a pain in the backside with links and font sizing.
- Sifr and opacity don’t mix too well.
- Fixing/amending someone else’s css code takes longer than you think.