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);添加到代码中即可修复。

＆＃13;

p {
  font-size: 200px;
}

.blur {
  filter: blur(2.5px);
  transition: 0.7s -webkit-filter;
  -webkit-transform: translateZ(0);
}

.blur:hover {
  filter: blur(0px);
}

＆＃13;

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

＆＃13;

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>

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

2 个答案: