html - Webkit 硬件加速渗入页面上的其他元素？

Question

我有一个包含多个 <article> 的页面元素全部排成一行。在<article>的底部元素很小<div>使用 3D CSS 变换。奇怪的是，即使原来的 <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 nightlies 中修复)，其中硬件加速元素将在具有 position:relative; 的后续元素中触发硬件加速。

要修复它，您可以删除 position:relative;，或使用 -webkit-font-smoothing:antialiased;

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