Webkit/Chrome模糊滤镜在过渡中的视觉错误，边缘在过渡中不能正确渲染

Question

我已经创建了一个显示问题的Jfiddle：

https://jsfiddle.net/qfgfszey/

将鼠标悬停在外部div上将启动悬停过渡；当设置缩放和过滤模糊的动画时，内部边缘直到过渡结束时才会正确渲染。这在Firefox或Safari中是不会发生的。请注意，内部图像的边缘是透明的(显示黑色背景)，然后在过渡后进行修复

有没有什么webkit css可以解决这个问题？

谢谢!

代码如下：

<div class="outer">
<div class="inner"
</div>
</div>

.outer { width:500px; height:500px; overflow:hidden; background-color:black; position:relative; }

.inner { width:100%; height:100%; background:url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/2-flower-wallpaper.jpg); background-size:cover;
-webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */}

.outer:hover .inner { -ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);     -webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */}

Answer 1

我在研究这里观察到的相反问题时偶然发现了这一点。

但是这个问题可以通过向转换元素(在本例中为.inner)添加backface-visibility: hidden;来解决。

https://jsfiddle.net/xfo81Lpb/

Answer 2

will-change CSS属性向浏览器提示元素的预期更改方式。

这在这里很有帮助，但要明智地使用它(如果你没有渲染问题，就不需要设置will-change )它会影响浏览器的性能。

 .inner {
   will-change: transform;
}