CODEWITHSUNDEEP
htmlwebkitcsshardware-acceleration
Adam Singer
Adam Singer

Reputation: 3007

Webkit hardware acceleration bleeding into other elements on the page?

I have a page that consists of several <article> elements all in a row. At the bottom of the <article> element is a small <div> that uses a 3D CSS transform. The weird thing is that even though the original <article> doesn't have hardware acceleration on, this small <div> is causing the rest of the <article> elements to also have hardware acceleration (I'm using the method outlined here: http://mir.aculo.us/2011/02/08/visualizing-webkits-hardware-acceleration/), even though it's only the small <div> that needs it.

When I hide the first <div>, the hardware acceleration is disabled for the subsequent <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>

becomes

<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>

Since the entire <article> tag gains hardware acceleration, sub-pixel anti-aliasing is disabled, and all of the text in the <article> is grainy.

Is there something simple that can prevent the subsequent <article> elements from gaining hardware acceleration?

Upvotes: 1

Views: 797

Answers (2)

Adam Singer
Adam Singer

Reputation: 3007

Well, I've answered my own question. This is a bug in Webkit (which has been fixed in the Webkit nightlies) where a hardware accelerated element will trigger hardware acceleration in subsequent elements that have position:relative;.

To fix it, you can remove position:relative;, or use -webkit-font-smoothing:antialiased;

I wrote a little article about it on my site: http://singy.posterous.com/hardware-acceleration-bleeding-into-subsequen

Upvotes: 2

Mario
Mario

Reputation: 36537

I think this is done to prevent HW acceleration from flipping on/off throughout the page. It's enabled "just in time" and then kept on. In my opinion it's nothing you should mess with (or have to mess with). It's something for the browser vendor to change or update (or properly document).

If you want to completely avoid hardware acceleration, don't use 3D transforms and use classic images instead.

Upvotes: 0

Related Questions