Question

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

将鼠标悬停在外部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

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

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

 .inner {
   will-change: transform;
}

Answer 2

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

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

https://jsfiddle.net/xfo81Lpb/

Webkit / Chrome模糊过滤过渡中的视觉错误，边缘在转换中无法正确呈现

2 个答案: