html - 修复有问题的过滤器 CSS 属性转换(Chrome)？

Question

JSFIDDLE

我试图在悬停时为元素的 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-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>