奇怪的CSS3过渡(闪烁)

Question

当我将鼠标悬停在我的按钮上时,它会在开始转换时首先发出白色闪光.当我将css3转换应用到我的按钮时,为什么会出现闪烁？我的浏览器是Google Chrome

看这里

---

<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

我摆脱了闪烁.将« -webkit-backface-visibility: hidden;» 添加到要转换的元素中.瞧!

Answer 2

Miguel对于修复恼人的闪光灯的背面可视性是正确的.但是,我正在使用变换比例,缩放后SVG动画不会很清晰.如果你不使用backface-visiblity属性,这是很尖锐的.

所以要么你有一个漂亮的动画与模糊的图形,或一个漂亮的图形与屏幕闪烁.

但是,您可以将以下行添加到要转换的对象的父级,这将修复屏幕的闪烁,并在缩放后仍然呈现图形清晰.

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