DOM elements with CSS position: fixed have a slight wobble on Retina displays

Originator:stevestreza
Number:rdar://10722903 Date Originated:19-Jan-2012 09:34 AM
Status:Duplicate/9816514 Resolved:
Product:iPhone SDK Product Version:5.0.1
Classification:UI/Usability Reproducible:Always
 
19-Jan-2012 09:34 AM Steve Streza:
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.

Comments

If you are using UIWebView and wish to work around this problem, you can override scrollViewDidScroll, check the contentOffset (which deals in logical pixels, not physical), and adjust if the value falls on a "half" logical pixel (e.g. if the contentOffset.y is a number like 30.5).

By stevestreza at Jan. 19, 2012, 5:44 p.m. (reply...)

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!