Chrome在-webkit过滤器上闪烁：模糊 [英] Chrome flickering on -webkit-filter: blur

问题描述

我对我的网页正文应用模糊转换

  body 
 transition（all 1s） 
& .blurred 
 pointer-events none 
 transition（all 1s）
 -webkit-filter blur（5px）
  pre> 
 
 
当我将模糊类添加到body时，Chrome闪烁，而Safari没有。 
 
 
 
  http://jsfiddle.net/j89Zs/ 
 
 
 
添加 -webkit-backface-visibility：hidden 无法解决此问题。这似乎消除了第一次闪烁，但是Chrome在应用模糊后仍然闪烁，特别是如果body包含大量内容/ div。
 
 
 
有什么方法可以实现
解决方案
我没有看到闪烁（OSX Mavericks上的Chrome 35.0），但我发现以下通常用于解决webkit中的动画闪烁：
  -webkit-transform：translateZ（0）; 
 -webkit-backface-visibility：hidden; 
 -webkit-perspective：1000; 
  
 
I'm applying a blur transition to the body of my page
body
    transition(all 1s)
    &.blurred
        pointer-events none
        transition(all 1s)
        -webkit-filter blur(5px)
Chrome flickers when I add the blurred class to body, whereas Safari does not. 

http://jsfiddle.net/j89Zs/

Adding -webkit-backface-visibility: hidden does not solve this. It seems to eliminate the first flicker, but Chrome keeps flickering after the blur is applied, especially if body contains a lot of content/divs.

Is there any way to achieve the same effect, without the flickering?
解决方案
I'm not seeing the flicker (Chrome 35.0 on OSX Mavericks) but I find the following often works for solving animation flickering in webkit:
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;


                        
这篇关于Chrome在-webkit过滤器上闪烁：模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！