奇怪的 CSS3 过渡(闪烁)

Question

当我将鼠标悬停在我的按钮上时，它在开始过渡时首先会发出白色闪烁。为什么当我将 css3 过渡应用于我的按钮时它会闪烁？我的浏览器是谷歌浏览器

看这里

<小时 />

<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 动画不会清晰。如果您不使用背面可见性属性，它会很锋利。

因此，要么您获得带有模糊图形的漂亮动画，要么获得带有屏幕闪烁的漂亮图形。

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

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

Answer 3

我相信

这目前是一个没有修复的问题。我在玩之前也遇到过这个问题，无法让它工作。使用纯色似乎很好，或者用背景图像伪造它。

类似的问题在这里：Webkit对渐变过渡的支持

更多详细信息：http://screenflicker.com/mike/code/transition-gradient/

Answer 4

您注意到的闪烁实际上是按钮的背景颜色更改为透明（因此，按钮在小提琴中"闪烁"或变成白色，因为主体的背景颜色是白色）。

如果您将按钮覆盖在另一个大小/高度/背景颜色（包括渐变）完全相同的元素上，则"闪烁"将不会明显。

查看此处使用小提琴的示例：http://jsfiddle.net/hrDff/12/

仍然绝对是一个错误...

Answer 5

我认为

问题是您正在从线性渐变背景切换到纯色背景，用于谷歌浏览器和Microsoft Edge网络浏览器。要解决此问题，您需要向伪类添加类似的线性渐变背景，在本例中为 ：hover 和 ：active。我自己在您的 jsfiddle 上尝试过，将鼠标悬停在按钮上时渲染中没有闪烁。

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

我更改了线性渐变的顶部颜色，以显著改变悬停效果。

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

当我将鼠标悬停在Chrome或Microsoft Edge中的按钮上时，没有更多的闪烁问题。我希望这有所帮助。

Answer 6

对于类似的问题，Jan的建议有助于改善除一个以外的所有背景图像。我通过注意到两个相互冲突的定位规则来摆脱最后一个的闪烁。我有一个position:static一个规则margin-top:-3em（减号），另一个规则margin-top:5em（加号）。因此，我建议您在遇到此类问题时仔细检查定位的一致性。

在你的例子中，米歇尔，我一直在用更长的延迟1秒到3秒进行测试，这有助于我理解什么是更清晰的阶段，一个延迟很短的闪光灯。实际上，您的渐变开始时没有背景，您看到的是页面的背景。我通过将测试页面正文的背景从象牙色更改为黑色来获得此信息。

当我在黑色背景上尝试渐变时，我得到了一个黑色舞台/闪光灯（在 3 秒时更容易看到）。也许测试规则的顺序应该是明智的，并尝试理解为什么渐变从身体或父的背景开始，而不是从你的背景开始。

解决方法可能是将按钮设置为div，并将按钮红色背景设置为按钮的确切大小和形状。

Answer 7

我像这样解决了闪烁问题：

目录如下：

<div class="pswp__item" style="display: block; transform: translate3d(464px, 0px, 0px);"><div class="pswp__zoom-wrap" style="transform: translate3d(87px, 248px, 0px) scale(0.57971);"><img class="pswp__img" src="/platform/advice/feedback/downloads?attachmentIds=1304495004557536" style="opacity: 1; width: 414px; height: 414px;"></div></div>

CSS 如下：

.pswp__zoom-wrap{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.pswp__zoom-wrap *{
-webkit-backface-visibility: hidden!important;
backface-visibility: hidden!important;
}
.pswp__item{
transform: translate3D(0, 0, 0);
-webkit-transform: translate3D(0, 0, 0);
}

Answer 8

这个链接为我修复了它。您只需要在闪烁的元素的 css 中添加一行：

http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit