Is there a workaround for font dimming during CSS3 opacity transitions?

I've got an HTML element where the opacity changes on hover (using a CSS3 transition). The problem is that in Firefox (on Windows at least), the text (a <p>) withi开发者_运维百科n the element (a <div>) dims perceptibly during the opacity change, then "pops back" to the way it should be a fraction of a second after the transition ends. Like this (video):

http://screencast.com/t/zzWc9EF8wq4c

This problem does not occur in Chrome.

Any ideas what might be causing this? Any workarounds?

Try using an RGBA color on your elements and transition that instead of transitioning the elements opacity (because this cascades down to all lower elements in the DOM tree). Thats how i do it on my projects :)