Change CSS + Opacity in Hover + Flickering

Question

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

Unfortunately, this is not very good, because if I am in and out very quickly, sometimes the opacity changes too slowly, and the colors seem to flicker. This flicker does not occur when I am and become slow.

I made an example so that you know what I mean:

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

Is this causing a browser error or is there something wrong with my code? And can this be fixed somehow? I tried using a jQuery script instead of doing opacity change through CSS, but the results are the same: /

Answer 1

Ha, this is almost the same problem as the web kit. So, I tried to imitate the fix for webkit (with -webkit-transform: translateZ(0) ), but using a 2D transform, and it will work!

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

Answer 2

Try adding a border: 1px solid transparent; element border: 1px solid transparent; to an element (not to :hover pseudoword). It worked for me.

Answer 3

For people who come here who have an image with an opacity that is not equal to 1, and with the same flicker, make sure you set background-color:white; to the image! I know this does not solve the issue, but it is a similar problem.

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

Answer 4

This did not work for me, and so I thought I wanted to mention what I did. I had to add overflow: hidden to all surrounding elements.

Answer 5

After trying the above tips, adding a z-index to the element, the hover effect was applied to solve the problem for me.

Answer 6

If the affected item has already been translated (and therefore the kizu fix is not applicable), make sure -webkit-backface-visiblity :

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