Michelle Michelle - 2 months ago 20
CSS Question

Weird CSS3 Transition (flickering)

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

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