Question

我有一个页面，它连续包含多个<article>个元素。在<article>元素的底部是一个使用3D CSS变换的小<div>。奇怪的是，即使原始<article>没有启用硬件加速，这个小的<div>也会导致其余的<article>元素也有硬件加速（我是使用此处列出的方法：http://mir.aculo.us/2011/02/08/visualizing-webkits-hardware-acceleration/），即使它只是需要它的小<div>。

当我隐藏第一个<div>时，后续<article>的硬件加速功能被禁用。

<article> <-- Does not have HW acceleration
[other divs and content]
<div></div> <-- Has HW acceleration
</article>

<article> <-- Has HW acceleration
[other divs and content]
<div></div>
</article>

<article> <-- Has HW acceleration
[other divs and content]
<div></div>
</article>

变为

<article> <-- Does not have HW acceleration
[other divs and content]
<div style="display:none"></div>
</article>

<article> <-- Does not have HW acceleration
[other divs and content]
<div></div> <-- Has HW acceleration
</article>

<article> <-- Has HW acceleration
[other divs and content]
<div></div>
</article>

由于整个<article>标记获得硬件加速，因此禁用了子像素消除锯齿，并且<article>中的所有文字都是颗粒状的。

是否有一些简单的东西可以阻止后续的<article>元素获得硬件加速？

Answer 1

好吧，我已经回答了我自己的问题。这是Webkit中的一个错误（已在Webkit中进行了修复），其中硬件加速元素将在具有position:relative;的后续元素中触发硬件加速。

要解决此问题，您可以删除position:relative;，或使用-webkit-font-smoothing:antialiased;

我在我的网站上写了一篇关于它的文章：http://singy.posterous.com/hardware-acceleration-bleeding-into-subsequen

Answer 2

我认为这是为了防止硬件加速在整个页面中打开/关闭。它“及时”启用，然后继续。在我看来，你不应该捣乱（或者不得不捣乱）。这是浏览器供应商更改或更新（或正确记录）的内容。

如果您想完全避免硬件加速，请不要使用3D变换并改为使用经典图像。

Webkit硬件加速渗透到页面上的其他元素？

2 个答案: