奇怪的 CSS3 过渡(闪烁)
Posted
技术标签:
【中文标题】奇怪的 CSS3 过渡(闪烁)【英文标题】:Weird CSS3 Transition (flickering) 【发布时间】:2012-04-25 11:16:16 【问题描述】:当我将鼠标悬停在按钮上时,它会在开始过渡时首先发出白色闪光。为什么当我将 css3 过渡应用到我的按钮时它会闪烁? 我的浏览器是谷歌浏览器
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;
【问题讨论】:
你想达到什么目的?尝试删除-webkit-transition
看看是否有帮助。
我正试图让它淡入另一种背景颜色。
移除这个按钮:hover background:#ff3019; 按钮:活动 背景:#cf0404;
【参考方案1】:
我这样解决了闪烁问题:
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);
【讨论】:
【参考方案2】:对于类似的问题,Jan 的建议有助于改进除一张以外的所有背景图片。通过注意到两个相互冲突的定位规则,我摆脱了最后一个的闪烁。我有一个position:static
一个规则margin-top:-3em
(减号)和另一个margin-top:5em
(加号)。因此,我建议您在遇到此类问题时仔细检查定位的一致性。
在您的情况下,Michelle,我一直在测试更长的延迟 1 到 3 秒,这有助于我了解什么是更清晰的阶段,即延迟非常短的闪光。您的渐变实际上从没有背景开始,您看到的是页面的背景。我通过将测试页正文的背景从象牙色更改为黑色来获得此信息。
当我在黑色背景上尝试您的渐变时,我得到了一个黑色舞台/闪光灯(在 3 秒时更容易看到)。 也许明智的做法是测试规则的顺序,并尝试理解为什么渐变从主体或父级的背景开始,而不是从您的背景开始。
解决方法可能是将按钮设置在 div 中,按钮的红色背景与按钮的大小和形状完全相同。
【讨论】:
【参考方案3】:我认为问题在于您正在从线性渐变背景切换到 Google Chrome 和 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 中的按钮上时,不再出现闪烁问题。我希望这会有所帮助。
【讨论】:
【参考方案4】:此链接为我修复了它。您只需在闪烁的元素的 css 中添加一行:
http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit
【讨论】:
请注意,link-only answers are discouraged,SO 答案应该是搜索解决方案的终点(相对于另一个参考中途停留,随着时间的推移往往会变得陈旧)。请考虑在此处添加独立的概要,并保留链接作为参考。 链接已损坏。【参考方案5】:Miguel 关于背面可见性修复烦人的闪光灯是正确的。但是,我使用的是变换比例,并且 SVG 动画在缩放后不会很清晰。如果不使用 backface-visiblity 属性,它会很清晰。
所以要么你得到一个带有模糊图形的漂亮动画,要么是一个带有屏幕闪烁的漂亮图形。
但是,您可以将以下行添加到要转换的对象的父级,这将修复屏幕闪烁并在缩放后仍使您的图形清晰。
-webkit-transform: translate3D(0, 0, 0);
【讨论】:
你刚刚拯救了我的夜晚。非常感谢!【参考方案6】:我摆脱了闪烁。将«-webkit-backface-visibility: hidden;
» 添加到您正在转换的元素中。瞧!
【讨论】:
渐变和过渡不能一起工作似乎是唯一的答案:***.com/questions/3790273/… 太棒了,这解决了我在 iPad 上使用脚本淡化容器不透明度时遇到的闪烁问题。 我在转换元素的不透明度时遇到了问题,该元素也应用了文本阴影。似乎淡化不透明度与阴影的渐变性质相结合会导致奇怪的闪烁。 -webkit-backface-visibility:隐藏修复它!虽然现在,在 2015 年,您可以将“backface-visibility: hidden” 去掉 -webkit 前缀。 如果我要进行大量转换,是否有理由不使用*
将其应用于所有元素?
另外,如果您正在转换包含图像的元素。将该属性也应用于 img。这对我有用【参考方案7】:
您注意到的闪烁实际上是按钮的背景颜色被更改为透明(因此,按钮在您的 Fiddle 中“闪烁”或变为白色,因为主体的背景颜色为白色)。
如果您将按钮覆盖在具有完全相同大小/高度/背景颜色(包括渐变)的另一个元素上,“闪烁”将不会很明显。
在此处查看使用您的小提琴的示例:http://jsfiddle.net/hrDff/12/
仍然绝对是一个错误...
【讨论】:
【参考方案8】:我认为这是目前没有修复的问题。在玩之前我也遇到过这个问题,无法让它工作。使用纯色似乎很好,或者用背景图像伪装它。
类似问题:Webkit support for gradient transitions
更多详情:http://screenflicker.com/mike/code/transition-gradient/
【讨论】:
以上是关于奇怪的 CSS3 过渡(闪烁)的主要内容,如果未能解决你的问题,请参考以下文章