css - 由于硬件加速，如何在不模糊 Webkit 文本的情况下实现高性能转换

Question

我有一个绝对定位的元素，我正在将其过渡到视口(viewport)中。该元素中有文本。我的理解是这样的:

• 将过渡应用于元素的位置(即顶部、左侧、底部、右侧、边距、填充)是不好的做法。这样做会强制浏览器在元素在页面上移动时大量重新流动。

• 将转换应用于元素是一种很好的做法，因为浏览器不会引发重新流动，因为盒模型位置保持在原始位置。

• 在 Webkit 浏览器中对元素应用转换会强制硬件加速。 (或者可以强制这样做，即如果 transform: translateX 没有，那么您可以使用 translate3d 且 z 轴为 0)。

• 硬件加速的文本不被视为矢量。这会导致文本变得模糊。

我找到了 this文章讨论了解决方法，但我不满意。

看起来用转换来转换元素会更好，但是，一旦元素达到其静止状态，用相同度量的左/上替换转换以从硬件加速中移除元素。

我走在正确的轨道上吗？这里有更简单的解决方案吗？

作为一个简单的例子，在切换 will-change 属性时检查文本。您可以看到，即使没有发生任何转换，文本也会因预期发生转换而变得模糊。这与在元素完成移动/将文本放在正在移动的元素旁边时在元素上保留变换是一样的。告诉 Chrome 将文本保留为矢量会非常好，但我怀疑所有父元素都得到提升，这就是文本被更改的原因。

$('button').click(function() {
  $('.example').toggleClass('is-blurred');
});

.example {
  font-size: 24px;
}
.example.is-blurred {
  will-change: transform;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle blur</button>

<div class='example'>
  I am some text
</div>

Answer 1

当 CSS 转换完成后，浏览器不需要大量的硬件资源来将元素保持在适当的位置。所以不用担心。