8

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!

Alex
  • 3,912
  • 5
  • 31
  • 39

3 Answers3

17

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.

helloPiers
  • 628
  • 6
  • 12
3

Well after spending a rediculous amount of time trying to figure this out I have found a solution:

Use this:

html {

-webkit-font-smoothing: none;

}

Masm
  • 31
  • 2
2

The reason for this is that only one mode can make use of the subpixels in the display, because they are arranged in a certain direction. The other mode will display the font with greyscaled anti-aliasing and appear slightly different.

Frode Bo Helland
  • 21
  • 1