CSS + Opacity change on Hover + Flickering

Question

I am trying to achieve a very simple thing: change opacity of a table row on hover.

Unfortunately, it doesn't work very good, because if I hover in and out very fast, sometimes the opacity change is too slow and it seems like the colors are flickering. This flickering doesn't happen when I hover in and out kinda slow.

I made an example so you know what I mean:

http://jsfiddle.net/yfhTW/2/

Is this behavior a browser bug or is something wrong with my code? And can it be fixed somehow? I have tried to use a Jquery script instead of doing the opacity change via CSS, but the results are the same :/

Answer 1

In case the affected element is already translated (and thus, the fix by kizu is not applicable) make sure to set -webkit-backface-visiblity:

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

Answer 2

Ha, it's almost the same problem the webkit sometimes have. So, I've tried to emulate the fix for webkit (the one with -webkit-transform: translateZ(0)), but using the 2D transform, and it worked!

So, it seems like just adding -moz-transform: rotate(0); to the elements that are affected by flickering solves the problem: http://jsfiddle.net/kizu/yfhTW/4/

Answer 3

Try to add the border: 1px solid transparent; to the element (not to :hover pseudoclass). It worked for me.

Answer 4

For people coming here who have an image with an opacity that isn't 1, and have a similar flicker, make sure you set background-color:white; on the image! I know this doesn't resolve the question at hand but it is a similar problem.

.post img { opacity:.8; background-color:white; }
.post:hover img { opacity:1; }