Css 如何在不因硬件加速而使Webkit中的文本模糊的情况下实现性能转换

我有一个绝对定位的元素，我正在转换到视口中。元素中有文本。我的理解是：

• 将转换应用于元素的位置（即顶部、左侧、底部、右侧、边距、填充）是一种不好的做法。这样做会迫使浏览器在元素在页面上移动时大量重新流动

• 最好将变换应用于图元，因为当长方体模型位置保持在原始位置时，浏览器不会导致重新流动

• 对Webkit浏览器中的元素应用变换会强制硬件加速。（或者可以强制执行此操作，即如果transform:translateX不执行此操作，则可以使用z轴为0的translate3d）

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

我找到了一篇讨论变通方法的文章，但我并不满意

似乎最好使用转换来转换元素，但是，一旦元素达到其静止状态，使用相同度量的左/顶替换转换，以从硬件加速中删除元素

我走对了吗？这里有更简单的解决办法吗

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

$（“按钮”）。单击（函数（）{
$（'.example'）.toggleClass（'is-fuzzle'）；
});
。示例{
字体大小：24px；
}
例如：是模糊的{
改变：转变；
}

切换模糊
我是一些文本
CSS转换完成后，浏览器不需要大量硬件资源来保持元素的位置。所以不用担心。
我的意思是，如果初始状态是transform:translate3d（0,0,0）；它的最终状态是transform:translate3d（100px，100px，0）；当它进入最终状态时，浏览器仍然保持硬件加速，因此文本模糊。看看属性我知道will change属性，并对它进行了大量的实验。will change属性为浏览器提供了一个提示，它应该采取必要的步骤来加速硬件。所以，在转换过程中，文本不是模糊的，而是模糊的，只要对其应用“将更改”。我在寻找本质上与意志改变相反的东西，但我不知道这是否存在。