UIWebViews in portrait iPhone applications on iOS7 on iPad renders with erroneous double width scrollable frame, even though content is specified to be 320

Originator:ian
Number:rdar://15030460 Date Originated:2013-09-20
Status:Open Resolved:
Product:iPad iOS SDK Product Version:iOS7
Classification:Serious Reproducible:Always
 
Summary:
A UIWebView created for an iPhone app renders VERY differently on iPad under iOS7 compared iOS6. If a UIWebView containing a HTML page with 320 pixels is loaded (with AND without @2x retina assets), the page is rendered as a 320 frame, but the content is zoomed in at 2x resolution, and horizontal scrolling occurs with half the content offscreen. This is very problematic for any iPhone apps relying on UIWebViews as part of their view layout. Reproducible on a number of iPhone apps using UIWebViews, rendering on both a non-retina iPad 2 as well as a retina iPad 4.

Steps to Reproduce:
1. Create a UIWebView for an iPhone application.
2. Load a local HTML page with the following content.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
This is a test with a very long string to show that UIWebView has incorrect rendering when running as an iPhone app on an iPad under iOS7.
</body>
</html>

3. Build and deploy a binary to iPhone under iOS7. Note the rendering behaves as expected.

4. Load the binary on an iPad under iOS7. Note that the rendering is occurring at twice the width expected.


Expected Results:
The rendered layout should be identical under iOS7 as iOS6, with the improved crisp retina text rendering, but respecting the logical pixel dimensions.

Actual Results:
The layout shows that the text is rendered into a 640 logical pixel buffer even if the frame of the UIWebView is specified as 320 pixels. Half of the layout is rendered offscreen, and horizontal scrolling can occur.

Version:
iOS6.1.3 and iOS7

Notes:
No workaround discovered as yet. Altering the frame of the UIWebView or altering the HTML has no effect.

Comments

Marked Duplicate of 14822059 (Open)

Marked Duplicate of 14822059 (Open)

Found a workaround to the bug (Apple radar has been amended.)

Found a workaround to the bug.

In the viewport meta tag, by omitting "width=device-width", UIWebView renders correctly.

Hence, recommended HTML under iOS6 for a viewport was:

[meta name="viewport" content="width=device-width, initial-scale=1.0"]

whereas under iOS7: [meta name="viewport" content="initial-scale=1.0"]

works.

Under iOS7.0 it appears that iPhone emulation for running iPhone applications on iPad does not supply the correct device width to UIWebView, but instead supplies the 2x width instead. On an iPad Gen 4 where the user is able to select 1x or 2x zoom, UIWebView still supplies 640 pixels as the device-width instead of 320 logical pixels.

  • Ian

Please note: Reports posted here will not necessarily be seen by Apple. All problems should be submitted at bugreport.apple.com before they are posted here. Please only post information for Radars that you have filed yourself, and please do not include Apple confidential information in your posts. Thank you!