IOS 5 (safari) bug with HTML touch events on “position:fixed” div

Question

I have a position:fixed div on a scrolling web page.

At first the event works, but when the page scroll, while the fixeed divs stays in place, its \"touch\" zone seems t

Answer 1

I'm having the same issue. It seems to be a z-index problem, when the divs are moved programmatically (with animations, etc.): the div in fixed position doesn't work properly since the user doesn't touch again for scrolling. Only in this last case the divs seems to be recomputed correctly.

Answer 2

I found a relatively strange solution to this bug. By adding a touchstart event listener and a blank event handler, it somehow seems to move the touch area on manual touch. I do not know if this is a solution for the JavaScript scroll issue.

Code:

document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});

Credit for finding this method goes to pamelafox in this github bug discussion.

Answer 3

I ran into the same issue using a fixed position navigation that scrolls the user around the page using jQuery animation. I don't believe it's a z-index issue. What I found is that when the animation moves the viewport, the fixed position element is actually still at the previous location until the user touches and moves the screen. At that point the position of the nav is updated. More information and demo here: http://bit.ly/ios5fixedBug

Answer 4

I found this bug too, but the below seemed to clear it up for me:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">`

add it to your html header

Answer 5

This issue may be related to another which has a couple of workarounds posted. Fixed positioning implementation on mobile safari is half-hearted at best.

Fixed position navbar only clickable once in Mobile Safari on iOS5

Answer 6

I had this problem. The way I got round it was to bind to "click" instead of "touchstart".

This meant that my "click" events got messed up (for users not on touch devices) so I detected a hover first and then used the hover to tell me if they were touch users or not. A bit dirty, but it works!