网页设计/ CSS：模糊文本在悬停时“不模糊”时会抖动

Question

请看看这个jsfiddle：https://jsfiddle.net/heLwx9bz/

我试图通过转换“悬浮模糊”一些悬停的文本。请注意当转换到blur(0px)时文本会略微抖动，它会向上跳跃并向左跳跃大约1px。为什么这样，我怎么能避免它呢？仅在向属性更改添加转换时才会发生抖动。

这是我的测试用例的代码，非常简单：

p {
  font-size: 200px;
}

.blur {
  filter: blur(2.5px);
  transition: 0.7s -webkit-filter;
}

.blur:hover {
  filter: blur(0px);
}

<div>
  <p class="blur">
    TEST
  </p>
</div>

Answer 1

这是Google Chrome问题。

某些css转换将是硬件加速。这意味着他们将使用计算机图形卡的强大功能来应用转换 - 并且由于显卡针对图形效果进行了优化，这使得转换更加平滑。

事情是过渡不总是使用硬件加速，但如果你应用特定的CSS规则，那么他们将强制启用它。启用硬件加速的css属性之一是转换规则。因此，应用css转换，显卡完成所有工作。

只需将-webkit-transform: translateZ(0);添加到代码中即可修复。

p {
  font-size: 200px;
}

.blur {
  filter: blur(2.5px);
  transition: 0.7s -webkit-filter;
  -webkit-transform: translateZ(0);
}

.blur:hover {
  filter: blur(0px);
}

<div>
  <p class="blur">
    TEST
  </p>
</div>

Answer 2

如果使用-webkit-transform: translateZ(0);的解决方案不起作用，请尝试将未模糊的版本设置为filter: blur(.2px)。

p {
  font-size: 200px;
}

.blur {
  filter: blur(2.5px);
  transition: 0.7s -webkit-filter;
}

.blur:hover {
  filter: blur(0.2px);
}

<div>
  <p class="blur">
    TEST
  </p>
</div>