Open Radar

 
23-May-2012 09:04 AM Samuel Fine:
Summary:

iOS 5 added support in UIWebView/Safari for DOM elements with position: fixed. This causes them to stay in the same rectangle, regardless of scroll position, on all devices. However, on devices with a Retina display, a slight "wobble" can be seen when scrolling. This can be seen both while the user is scrolling with their finger on the screen, and during the deceleration after a user has lifted their finger but before the scroll view has stopped scrolling. This happens both in Safari and in an app's UIWebView. Attached is a test case that can be loaded in either the iOS Simulator or on a device to demonstrate the issue.

Steps to Reproduce:

1. Create an HTML page
2. Add an element with a position:fixed style
3. Load the page on a device with a Retina display
4. Attempt to scroll

Expected Results:

The DOM node will appear within the exact same rectangle of physical pixels on the device.

Actual Results:

The DOM node will appear within the rectangle, but will vary by about one pixel, while scrolling, and while decelerating.

Regression:

The simulator does not appear to show this issue while the user's "finger" is on the screen. However, the iPhone 4S does show this issue while the user's finger is on the screen.

This issue has not been seen on the iPhone 3GS, which does not have a Retina display.

This issue is visible both in UIWebViews and in Mobile Safari.

Notes:

A test case showing this issue can be found at: http://stevestreza.com/files/test-css-fixed-mobile.html

I suspect this issue is caused by the web view's scroll view. The scroll view appears to be able to scroll to any physical pixel, including odd-numbered pixels. However, the web view itself only deals with logical pixels, and so does not adjust the DOM element by a physical pixel, causing the distortion.