html - 网页设计/CSS : Blurred text jitters when being "un-blurred" on hover

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 的问题。

Certain css transitions will be hardware accelerated. What this means is that they will use the power of your computers graphics card to apply the transitions – and since the graphics card is optimized for graphical effects, this makes the transitions much smoother.

The thing is transitions don’t always use hardware acceleration, but if you apply a specific css rule then they will force it to enable. One of the css properties that will enable hardware acceleration is the transform rules. So apply a css transform and the graphics card does all the work.

只需在代码中添加 -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>