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

Question

JSFIDDLE

我正在尝试设置filter: blur()动画filter: blur()悬停元素的filter: blur()属性。 例如：

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-qc-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属性，它可以正常工作，只需将其替换为：

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

这个技巧解决了Webkit浏览器上的许多怪异动画。

https://davidwalsh.name/translate3d

Answer 3

您可以通过以下方法解决此问题：在悬停时向父级添加框阴影以抵消明亮的边缘。 小提琴

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);
}

Answer 4

过滤器：blur（.3px）

.3px几乎不影响屏幕，并且仍然可以设置动画而不是0px