Weird CSS3 Transition (flickering)

Question

When I hover unto my button, it gives a white flash first when starting the transition. Why does it sort of flickers when I apply a css3 transition to my button? My brow

Answer 1

Miguel is right about backface-visiblity fixing the annoying flash. However, I'm using transform scale and the SVG animated will not be sharp after scaling. It is sharp if you don't use the backface-visiblity property.

So either you got a nice animation with a blurry graphic, or a nice looking graphic with screen flashes.

You can however add the following line to the parent of the object to be transitioned, which will fix the flashing of the screen and still renders your graphic sharp after scaling.

-webkit-transform: translate3D(0, 0, 0);

Answer 2

I think the issue is that you are switching from a linear-gradient background to a solid background color for Google Chrome and Microsoft Edge web browsers. To fix this issue you would add a similar linear-gradient background to your pseudo classes, in this case the :hover and the :active. I tried it myself on your jsfiddle and I had no flashing in the rendering while hovering over the button.

        background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: linear-gradient(top,  #ff3019 0%,#cf0404 100%);

I changed the top color of the linear-gradient to give a noticeable change to the hover effect.

 button:hover {
background: -webkit-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: -o-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: -ms-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
   }

There are no more issues with flashing when I hover over the button in Chrome or Microsoft Edge. I hope this helps.