过渡变换时如何停止Chrome切断CSS模糊过滤器

Question

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

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

我假设在为变换设置动画时会创建一个新的堆叠上下文，类似于应用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。