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 browser is Google Chrome

See here

---

<button>Log In</button>​ 

CSS:

button {     background: #ff3019;     background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));     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%);     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );     border:1px solid #890000;     display:block;     margin:0 auto;     width:200px;     padding:5px 0;     border-radius:8px;     color:#fff;     font-weight:700;     text-shadow:0 1px 1px #000+50;     box-shadow:0 2px 3px #000+150;     -webkit-transition:background linear .5s; } button:hover {     background:#ff3019; } button:active {     background:#cf0404; } 

​

Answer 1

I got rid of the flickering. Add «-webkit-backface-visibility: hidden;» to the elements you are transitioning. Voilà!

Answer 2

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