我正在对我的页面主体应用模糊过渡
body
transition(all 1s)
&.blurred
pointer-events none
transition(all 1s)
-webkit-filter blur(5px)
当我将 blurred 类添加到 body 时,Chrome 会闪烁,而 Safari 不会。
添加 -webkit-backface-visibility: hidden
没有解决这个问题。它似乎消除了第一次闪烁,但 Chrome 在应用模糊后一直闪烁,尤其是当 body 包含大量内容/div 时。
有没有什么办法可以达到同样的效果,而且没有闪烁?
最佳答案
我没有看到闪烁(OSX Mavericks 上的 Chrome 35.0),但我发现以下方法通常可以解决 webkit 中的动画闪烁问题:
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
关于html - Chrome 在 -webkit-filter : blur 上闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23619520/