修复过滤器CSS属性转换（Chrome）？

Question

JSFIDDLE

我试图给悬停时元素的filter: blur()属性设置动画。 e.g：

HTML

<div class="parent"> 
    <div class="child"></div> 
</div> 

CSS：

.parent { 
    width: 300px; 
    height: 300px; 
    position: relative; 
    overflow: hidden; 
} 

.child { 
    width: 100%; 
    height: 100%; 
    background: url(http://lorempixel.com/output/cats-q-c-300-300-9.jpg); 
    transform: scale(1.2); 
    transition: all .45s linear; 
} 

.parent:hover .child { 
    -webkit-filter: blur(10px); 
    filter: blur(10px); 
} 

它的工作原理，但似乎在Chrome浏览器被窃听。动画会执行，但直到完成为止，图像的边缘会变模糊。在Firefox和Safari中很好。任何想法我怎么能绕过这个问题？预期的结果是它在任何点都没有任何模糊边缘可见的动画。

Answer 1

编辑：

添加到.child：

-webkit-transform: translateZ(0); 
     -webkit-backface-visibility: hidden; 
     -webkit-perspective: 1000; 

.parent { 
 
     width: 300px; 
 
     height: 300px; 
 
     position: relative; 
 
     overflow: hidden; 
 
    } 
 

 
    .child { 
 
     width: 100%; 
 
     height: 100%; 
 
     background: url(http://lorempixel.com/output/cats-q-c-300-300-9.jpg); 
 
     transform: scale(1.2); 
 
     transition: all .45s linear; 
 
     -webkit-transform: translateZ(0); 
 
     -webkit-backface-visibility: hidden; 
 
     -webkit-perspective: 1000; 
 
    } 
 

 
    .parent:hover .child { 
 
     -webkit-filter: blur(10px); 
 
     filter: blur(10px); 
 
    }

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 2

行，所以我试着改变对孩子的变换属性和它的作品，只需更换它与：

transform: translate3d(0, 0, 0) scale(1.2); 

这个技巧解决了webkit浏览器中很多奇怪的动画。

https://davidwalsh.name/translate3d

Answer 3

你就可以用加入的box-shadow于母公司的悬停反击亮边的解决方法。 fiddle

的Html

<div class="parent"> 
    <div class="child"></div> 
</div> 

CSS

.parent { 
    width: 300px; 
    height: 300px; 
    position: relative; 
    overflow: hidden; 
    transition: all 0.45s linear; 
} 

.child { 
    width: 100%; 
    height: 100%; 
    background: url(http://lorempixel.com/output/cats-q-c-300-300-9.jpg); 
    transform: scale(1.2) translate3d(0,0,0); 
    transition: all 0.45s linear; 
    backface-visibility: hidden; 
} 

.parent:hover .child { 
    -webkit-filter: blur(10px); 
    filter: blur(10px); 
} 

.parent:hover { 
    -webkit-box-shadow: inset -50px -50px 50px -40px rgba(0,0,0,0.5); 
}