Question

I am seeing an interesting bug in chrome regarding CSS transitions.

The page flickers during the transitions. For now i have only seen this in Chrome.

You can see this on my porfolio: http://www.dkhalife.com

Just scroll down to the skills sections and hover over any of the social icons on the right repeatedly, you can’t miss it…

The CSS transition code is mainly :

-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;

And basically i am just changing the opacity and margin using a hover pseudo class.

I have tried:

-webkit-backface-visibility: hidden;  

As mentioned on some other questions on SO but it doesn’t seem to fix my problem.

Any help is appreciated.

Answer 1

Instead of

-webkit-transition: all 500ms;

animate just the properties you want to change

-webkit-transition: opacity,margin 500ms;