Have you built anything with the super awesome jQuery javascript library? If you have, you know that it makes doing just about anything with JS significantly easier. I’m particularly drawn to the similarities it shares with CSS, structurally. It also bridges most cross-browser issues without batting an eye.
The only downside I’ve encountered so far is that it often causes an annoying flickering effect on all text inside the page. It turns out that this only applies to Firefox, and only to the Mac version of it. And it was driving me nuts.
The fix you ask? One line of global CSS.
body{opacity: .999;}
What does this do? It forces all the text on the page into lighter aliasing mode, which is what jQuery was toggling between. You will lose a little bit of the text “pop” on the page, but it will make for seamless and fluid JS interactivity.
Update: Nolan chimed in with some handy perspective on this technique. Turns out there are some flash implications and he has a suggested solution.
This will work as long as you don’t have any Flash on the page.
The Mac/Firefox combo also has an issue where if any HTML element that has opacity applied via CSS touches a Flash object, the Flash disappears. Since you are applying the opacity to the body tag, all Flash will vanish.
The way around this to create a div with the same opacity style you described, and then move it off the visible page. I like “position:absolute;top:-3000px;”.
@nolan - thanks, man! That’s super handy knowledge. I haven’t run into any flash quirks yet, but I’m implementing your fix pre-emptively in some test projects