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

【问题标题】：Fixing bugged filter CSS property transition (Chrome)?修复错误的过滤器 CSS 属性转换（Chrome）？
【发布时间】：2016-08-02 10:03:16
【问题描述】：

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 中都很好。有什么想法可以绕过这个问题吗？预期的结果是它的动画在任何点都没有可见的模糊边缘。

【问题讨论】：

标签： html css google-chrome transition

【解决方案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>

【讨论】：

这并不能消除模糊的边缘。

【解决方案2】：

好的，所以我尝试更改孩子的转换属性，它可以工作，只需将其替换为：

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

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

https://davidwalsh.name/translate3d

【讨论】：

模糊边缘仍然存在 - 不是预期结果

【解决方案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);
}

【讨论】：

【解决方案4】：

滤镜：模糊（.3px）

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

【讨论】：