css - CSS 变换动画会导致后续模糊元素出现视觉故障（仅限 Chrome）

Question

所以这有点奇怪。我有一个模糊的元素（filter: blur(..)这里只是一个黑框），它被稍微放大（transform: scale(2)）以隐藏模糊的边缘。现在，当前面的元素为属性设置动画时，模糊transform的元素会在动画期间显示视觉故障（可能会丢失它scale(2)，但我不确定）。

我在 Chrome（在 Linux 上）中看到了这种行为，但在 Firefox 中没有。

我曾尝试将backface-visibility: hidden和添加translateZ(0)到模糊元素，但这些实际上会导致刚刚描述的相同视觉故障。我不确定这是为什么。

任何解决方法或对此问题的洞察力都值得赞赏！这是一个最小的复制：

https://jsfiddle.net/malwilley/tz4fwmu2/

button {
  width: 400px;
  height: 60px;
  transition: transform 500ms;
}

button:hover {
  transform: translateY(-4px);
}

.container {
  margin-top: 20px;
  overflow: hidden;
  height: 200px;
  width: 400px;
}

.blurred {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: black;
  filter: blur(10px);
  transform: scale(1.2);
}

<button>Hover me</button>

<div class="container">
  <div class="blurred" />
</div>

标签： cssgoogle-chrome

Answer 1

有时，当您在没有 3D 图形处理器支持的情况下进行软件渲染时，Chrome 中会出现这些故障。

据我了解，您可以使用任何 Z 坐标触发 3d 支持transform。因此，附加translateZ(0)到您的缩放变换中.blurred会使故障消失。

旧解决方案

button {
  width: 400px;
  height: 60px;
  transition: transform 500ms;
}

button:hover {
  transform: translateY(-4px);
}

.container {
  margin-top: 20px;
  overflow: hidden;
  height: 200px;
  width: 400px;
}
++ 
.blurred {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: black;
  filter: blur(10px);
  transform: scale(1.2) translateZ(0);
}

<button>Hover me</button>

<div class="container">
  <div class="blurred" />
</div>

新解决方案

我稍微改变了我的风格
现在

.container {
    /* ... */
    transform: scale(1);
}
.blurred {
    transform: scale(1.2);
}

我为 3D 渲染使用了另一个触发器，并将其用于.container代替.blurred元素

button {
  width: 400px;
  height: 60px;
  transition: transform 500ms;
}

button:hover {
  transform: translateY(-4px);
}

.container {
  margin-top: 20px;
  overflow: hidden;
  height: 200px;
  width: 400px;
  transform: scale(1);
}

.blurred {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: black;
  filter: blur(10px);
  transform: scale(1.2);
}

<button>Hover me</button>

<div class="container">
  <div class="blurred" />
</div>