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