Webkit/Chrome 模糊过滤器在过渡中出现视觉错误，边缘在过渡中无法正确渲染答案

【问题标题】：Webkit/Chrome blur filter visual bug in transition, edges don't render properly in transitionWebkit/Chrome 模糊过滤器在过渡中出现视觉错误，边缘在过渡中无法正确渲染
【发布时间】：2016-01-13 06:19:29
【问题描述】：

我创建了一个显示问题的 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 */}

【问题讨论】：

标签： html css google-chrome

【解决方案1】：

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

但是这个可以通过将backface-visibility: hidden;添加到过渡元素（在本例中为.inner）来解决。

https://jsfiddle.net/xfo81Lpb/

【讨论】：

【解决方案2】：

will-change CSS 属性向浏览器提示元素应该如何改变。

这在这里有所帮助，但要明智地使用它（如果您没有呈现问题，则无需设置 will-change）它会影响浏览器性能。

 .inner {
   will-change: transform;
}

【讨论】：