Bug 90393 – Mobile Webkit reflow issue

• Component: New Bugs
• Status: RESOLVED INVALID

[Stephen McKamey]

Created attachment 150450 [details]
A simple document to demonstrate the issue.

Overview:

I am experiencing an issue whereby clicks on a positioned:fixed element aren't landing in the correct location after the window has scrolled. Slight manual scrolling (e.g., 1px up or down) of the window appears to be enough to realign the next click. Also using JavaScript to force the entire document to reflow on scroll seems to work around the issue in simple scenarios.

The attached example shows the issue. The attached script is a work around but only for simple examples.

Platform / OS:

Mobile Webkit: 534.46 (Mobile Safari and Chrome for iOS)

iOS 5.1.1 on iPhone 4 and iPad 2

Steps to reproduce:

When first loaded the index bar on the left works as expected scrolling to the appropriate letter when clicked. After that initial click, however, clicks on the index register as somewhere further down usually off the screen but occasionally on a different letter down below the click. For example, on an iPhone 4 sized screen, clicking index B in the example jumps to the correct scroll position, but then a subsequent click on 'B' will appear to register as a click on 'I' or 'J'.

Expected result:

The second click on index 'B' should position the widow with 'B' at the top.

Actual result:

The second click on index 'B' registers as a click on index 'I' or 'J' (depending on the height of the viewport). Additional clicks appear to register off the end of the list and do not have any effect.

Work arounds:

Slightly scrolling up or down appears to reflow the document enough for the next click to work as expected. Also brute-force CSS reflow of the entire document (not just the body) via JavaScript appears to have a similar effect (see the attached script).

[Stephen McKamey]

Created attachment 150451 [details]
A work around script which just brute forces an entire CSS reflow on scroll of the window

A work around script which just brute forces an entire CSS reflow on scroll of the window. The script throttles itself to fire 100ms after scrolling stops.

[Stephen McKamey]

I forgot to mention that the example explicitly forces the viewport to the size of the window. So the user cannot zoom in/out, meaning that the position:fixed should anchor the element to the left side of the window.

[Alexey Proskuryakov]

Please report iOS specific issues to Apple via <http://bugreport.apple.com>. We cannot track them here because iOS WebKit is not build directly from webkit.org sources. Closing as INVALID per our policy.