CODEWITHSUNDEEP
iphoneipad
Alex
Alex

Reputation: 4190

UIWebView font is thinner in portrait than landscape

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!

Upvotes: 8

Views: 3651

Answers (3)

helloPiers
helloPiers

Reputation: 678

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.

Upvotes: 17

Frode Bo Helland
Frode Bo Helland

Reputation: 21

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.

Upvotes: 2

Masm
Masm

Reputation: 31

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;

}

Upvotes: 3

Related Questions