UIWebView font is thinner in portrait than landscape

Question

My app contains a UIWebView. When the app rotates from portrait to landscape or back, the font weight appears to slightly change. Both bold text and regular text get slightly bolder in landscape, and slightly thinner in portrait.

This does not appear to be the case in Safari, only in my app. Here is an example image, taken as a screenshot on the iPad. I have rotated and cropped an example section.

alt text http://dl.swankdb.com/font-change-example.png

I have the following CSS configured, but it seems to prevent the drastic font size change, not the subtle weight change that I am observing:

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

Can anyone explain this? The simulator does not do it -- but my iPad, iPhone 3GS and iPhone 4 all have it. I've also received reports from customers that it happens to them, so I know it's not in my head!

Answer 1

I've seen this in Safari itself too with a web app I'm putting together. After a day or so of head scratching, and deconstructing the CSS used by the iPad User Guide, I found that

 -webkit-transform: translate3d(0,0,0);

does the trick. Googling around it looks like this enables hardware acceleration of rendering which leads to far more consistent results in portrait and landscape orientations.