如何实现高性能转换,而不会因Web硬件加速而模糊Webkit中的文本

Question

我有一个绝对定位的元素,我正在转换到视口.元素中包含文本.我的理解是这样的:

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

• 将变换应用于元素是一种很好的做法,因为当模型位置保持在原始位置时,浏览器不会产生重新流动.

• 将转换应用于Webkit浏览器中的元素会强制进行硬件加速.(或者可以强制这样做,即如果转换:translateX没有那么你可以使用translate3d,z轴为0).

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

我发现这篇文章讨论了解决方法,但我并不满意.

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

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

举个简单的例子,在切换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转换完成后，浏览器不需要大量的硬件资源来保持元素就位。所以不用担心。