奇怪的CSS3过渡(闪烁)

时间:2012-04-13 03:40:28

标签: html css css3 css-transitions

当我将鼠标悬停在按钮上时,它会在开始转换时首先发出白色闪光。当我将css3转换应用到我的按钮时,为什么会出现闪烁? 我的浏览器是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;
}

8 个答案:

答案 0 :(得分:101)

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

答案 1 :(得分:10)

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

所以要么你得到一个带有模糊图形的漂亮动画,要么是带有屏幕闪烁的漂亮图形。

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

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

答案 2 :(得分:4)

我认为目前这是一个没有修复的问题。在玩之前我也遇到过这种情况,无法让它发挥作用。使用纯色似乎很好,或者用背景图像伪装。

类似的问题:Webkit support for gradient transitions

更多细节:http://screenflicker.com/mike/code/transition-gradient/

答案 3 :(得分:1)

您注意到的闪烁实际上是按钮的背景颜色被更改为透明(因此,按钮“闪烁”或在您的小提琴中变为白色,因为正文的背景颜色为白色)。

如果您将按钮覆盖在具有完全相同的尺寸/高度/背景颜色(包括渐变)的另一个元素的顶部,则“闪烁”将不会显着。

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

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

答案 4 :(得分:1)

这个链接为我修好了。你只需要在闪烁的元素的css中添加一行:

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

答案 5 :(得分:1)

我认为问题在于您正在为Google Chrome和Microsoft Edge网络浏览器从线性渐变背景切换为纯色背景色。要解决此问题,您需要为伪类添加类似的线性渐变背景,在本例中为:hover和:active。我在你的jsfiddle上尝试了一下,当我将鼠标悬停在按钮上时,我没有在渲染中闪烁。

&#13;
&#13;
        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%);
&#13;
&#13;
&#13;

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

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

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

答案 6 :(得分:0)

有一个类似的问题,Jan的建议有助于改善所有背景图像,但有一个。通过注意两个相互矛盾的定位规则,我摆脱了最后一个的闪烁。我有一个position:static一个规则margin-top:-3em(减号),另一个margin-top:5em(加号)。因此,我建议您在遇到此类问题时仔细检查定位的一致性。

在你的情况下,米歇尔,我一直在测试更长的延迟1s到3s,这有助于我理解什么是更清晰的阶段,闪光延迟很短。您的渐变开始时没有背景,您看到的是页面的背景。我通过将测试页面的主体背景从象牙变为黑色来获取此信息。

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

解决方法可能是将按钮设置为div,按钮的红色背景与按钮的大小和形状完全相同。

答案 7 :(得分:0)

我解决了这样的眨眼:

Html如下:

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