html - 过渡中的 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

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

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

https://jsfiddle.net/xfo81Lpb/