Open Radar

 
22-Mar-2012 10:31 AM Thijs van der Vossen:
Summary:

In Mobile Safari (tested on iPad 2 and iPhone 4), text rendering in landscape orientation differs from text rendering in portrait orientation. In landscape orientation text appears slightly stretched vertically.

There is no difference in text rendering between portrait and landscape orientation when a CSS rule such as -webkit-transform: translate3d(0,0,0); is set on the element containing the text (in other words, when the text is on a non-opaque CA layer).

The issue can be clearly seen in the animate GIF you can find at http://stuff.vandervossen.net/temporary/identical-test.gif (notice how the x-height of the body text for the top two paragraphs in Helvetica differs by a full pixel between portrait and landscape orientation)

The issue cannot be reproduced using the iOS Simulator

Steps to Reproduce:

1. Go to http://stuff.vandervossen.net/temporary/identical-test.html on an iPad or iPhone (actual device, not the iOS Simulator)

2. Notice how the text rendering for the top two and bottom two paragraphs is identical in portrait orientation.

3. Rotate to landscape orientation.

4. Notice how the text rendering or the top two and bottom two paragraphs is different in landscape orientation.

Expected Results:

Text rendering should be identical for the same font regardless of device orientation.

Actual Results:

Text rendering is not identical for the same font in portrait and landscape orientation.


22-Mar-2012 10:31 AM Thijs van der Vossen:
'identical-test.zip' was successfully uploaded