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 :/

The problem appears to be Firefox specific. I have just updated my Chrome to the newest version and the flickering there is gone. However in Firefox 6.0.2 it is still there. I didnt even look at IE, since it has some problems with opacity anyways. — r0skar, Sep 28 '11 at 11:45
p.s. did you see the flickering too with Firefox 6.0.2 or is it probably just something with my configuration and I am the only one who sees the flickering? — r0skar, Sep 28 '11 at 11:53
I'm seeing same behaviour in Firefox 6.0.2. It seems to be related to the default `display: table-cell` that a `` has. When I changed to `display: block`, the problem was gone, but of course the table layout was screwed up. Since your opacity change is only changing colors, could you do it with a color change on `:hover` instead? — Pat, Sep 28 '11 at 12:22
Hi Pat, Do you mean changing colors of text and background color to achieve almost the same result? I guess I could do that. Good idea! But it wont look identical as changing opacity, or? I will probably go with that anyways if i dont find another work around. Thanks! — r0skar, Sep 28 '11 at 12:26

score 23 · Accepted Answer · answered Oct 01 '11 at 21:15

23

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/

answered Oct 01 '11 at 21:15

kizu

42,604
4
68
95

Wow! It does really seem to work. You´re amazing! :) However I wonder, if some1 could explain me why this works, but nevertheless thanks very much! – r0skar Oct 02 '11 at 10:20
1

Looks like modern browsers apply a slight different rendering/reflow rules to the blocks that are affected by CSS3 transforms. So, when something goes wrong it's just another thing to try. Just like `zoom:1` for IE :) – kizu Oct 02 '11 at 10:26
Good to know. I am gonna save that snippet, so I can try it when I have problems with some css3 effects again. I think I would have never been able to get the solution to this one myself - so thanks again :) – r0skar Oct 02 '11 at 10:30
But be aware of unwanted behaviour relating to http://stackoverflow.com/a/10814448/5159481 – Beat Jan 14 '16 at 15:25
Thank you! Didn't fix it for me this time, but https://stackoverflow.com/questions/10134935/weird-css3-transition-flickering did – christopher.theagen Sep 20 '17 at 21:28

score 5 · Answer 2 · answered Mar 12 '14 at 12:41

5

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

answered Mar 12 '14 at 12:41

Bartłomiej Semańczyk

59,234
49
233
358

This works where you have an image with opacity e.g. the image contains a shadow effect – soulglider Nov 18 '14 at 10:13

score 3 · Answer 3 · answered Sep 02 '14 at 05:41

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; }

score 2 · Answer 4 · answered Apr 04 '12 at 05:11

2

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

answered Apr 04 '12 at 05:11

Wilhelm

820
8
10

score 2 · Answer 5 · answered Jul 12 '19 at 15:05

2

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;

answered Jul 12 '19 at 15:05

Max

1,011
1
13
20

This fixed it for me! It's strange because I could only notice this issue on certain monitors. – tyirvine Feb 09 '22 at 16:34

score 0 · Answer 6 · answered Mar 16 '18 at 15:46

0

After trying the above suggestons, adding a z-index to the item the hover effect was being applied to solved the problem for me.

answered Mar 16 '18 at 15:46

Colton Neifert

83
6

Could you post a forked fiddle or code block to improve your answer. – pmkro Mar 16 '18 at 16:07

CSS + Opacity change on Hover + Flickering

6 Answers6