css - 如何在转换转换时阻止 Chrome 切断 CSS 模糊过滤器

Question

我正在 CSS 中构建视觉效果，它将 filter: blur 应用于元素并为该元素的子元素设置动画。其中一些 child 部分不在视野范围内，这会导致在 Chrome 中设置动画时呈现不一致:

当过渡处于事件状态时，CSS 滤镜的呈现方式与元素静止时不同。它似乎在移动时仅裁剪并模糊视口(viewport)内的元素部分。这会导致元素接触窗口边缘时出现不需要的渐变(如下例)。

我假设在动画转换时会创建一个新的堆叠上下文，类似于应用 transform3d 或 will-change: transform 时。应用这些属性会产生相同的效果，即使元素是静态的。

当将元素嵌套在另一个元素中并在父元素上设置变换并在子元素上设置模糊时，问题就消失了。但这对我来说不是解决方案，因为我将为多个元素制作动画，然后模糊容器以实现我所追求的视觉效果。

我创建了一个带有最小测试用例的代码笔:https://codepen.io/larixk/pen/jONRoXO这里有一个带有 filter: blur 的元素，它在 :hover 上转换。

.blurred {
  width: 50vmin;
  height: 50vmin;
  margin: 0 auto;
  border-radius: 50%;
  background: black;

  filter: blur(5vh);

  transform: translateY(-80%);
  transition: transform 1s;
}

.blurred:hover {
  transform: translateY(-20%);
}

转换时的预期结果:

转换时的实际结果:

见于 Chrome 版本 77.0.3865.90 和 Chrome Canary 版本 79.0.3930.0。

在 Firefox (70.0b11) 或 Safari (13.0.1) 中不会出现问题。

Chrome 中是否存在问题，或者我遗漏了什么？

Answer 1

.blurred {
    width: 50vmin;
    height: 50vmin;
    margin: 0 auto;
    border-radius: 50%;
    background: black;
    filter: blur(5vh);
    transition: 1s;
    position: relative;
    top: -140px;
}

.blurred:hover {
    top: 0px;
}

如果您希望它具有响应性，您也可以使用 vw 而不是 px。