iOS 5 Un-clickable (or Invisible) Fixed Positioned Content After Scroll Bug

Pre-Conditions (Continued)

There is also unseen content at page load that has styles overflow: hidden; and height: 1px;. The overflow: hidden; style is a key condition of the bug. This unseen content is much taller than the screen height, and when shown will cause scrolling. This is another key condition of the bug.

Finally, all CSS styles are defined by an external style sheet that is included via a link tag. The bug does not manifest if the same CSS rules are in an inline style tag in the page head.

This bug does not occur on the desktop. It is seen in iOS 5. A precursor to this bug can be seen in this test case under iOS 4, however the bug does not fully manifest in iOS 4 because there is no fixed positioning.

Action to Create Bug

The user will reveal the unseen content via click, causing JavaScript to set that content to height: auto;. You have already completed this step when you clicked the link at the top of the page.

Next, the user will scroll all the way to the bottom of this newly shown content. Without scrolling back up again, while still at the bottom of the content, the user will click Mobile Safari's reload icon. The page will reload. The scrolling content will again go back to being unseen. The user should now try to click the link in the fixed positioned header bar without trying to scroll the page first.

Result of Bug

The link in the fixed positioned bar cannot be clicked. It is receiving no mouse and no touch events. Occasionally, the first time the user tries to scroll down, the browser ignores the user. When the user does scroll the browser view, the link in the fixed positioned content will immediately become clickable again.

Interestingly, if you remove the -webkit-transform: translateZ(0); style from the element that has the overflow: hidden; style, this bug will actually cause the fixed positioned content to disappear entirely rather than just not be clickable.

I have also seen this bug occur not only with the window's scroll position, but also with scroll position on elements that are overflow: auto; with the style -webkit-overflow-scrolling: touch;.

Expected Result

After reload, fixed positioned content should not be invisible, and should be receiving events from user input.

Quick Fix

It is possible to prevent this bug simply by making sure that the page loads with content that causes vertical scrolling. For example, you can just put this HTML into your page: <div id="ios5fix" style="position: absolute; left: 0; top: 0; width: 100%; height: 101%;"></div> Wait a few dozen milliseconds after page load, and you can actually delete this div safely.

The rest of this content is to ensure the page content scrolls. Scroll to the bottom to test this bug.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Now, DO NOT scroll up, and hit the RELOAD button in Mobile Safari... and as soon as the page reloads, try to click the link again. (You will not be able to until you scroll the window down with your finger.)