StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIOS 5 (safari) bug with HTML touch events on "position:fixed" div
text
Body
copied!<p>I have a position:fixed div on a scrolling web page.</p> <p>At first the event works, but when the page scroll, while the fixeed divs stays in place, its "touch" zone seems to change (it seems to scroll - except on top of another div, or depending on the page layout...). Eventually no touch event is received any more if you scroll too much. Sometimes the underlying div receives the event instead.</p> <p>Here's the sample:</p> <pre><code><html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"> <meta name="apple-mobile-web-app-capable" content="yes" /> <style> #fixed { position: fixed; width:200px; height:200px; z-index:1; background: rgba(100,0,0,0.5); } #scrolling { display: block; position: absolute; top: 100px; left: 100px; width:200px; height:999px; background: rgba(0,100,0,1); } </style> </head> <body> <div id="fixed" ontouchend="alert('touch fixed')"></div> <div id="scrolling" ontouchend="alert('touch scrolling')"></div> </body> </code></pre> <p>When you scroll enough and <strong>touch the red "fixed" div on its left side, nothing happens</strong> (no alert). However, on the right side (above the green scrolling div) it works... ?!</p> <p>Looks like a Safari bug to me. Do you experience the same? Any idea for a workaround? (Iscroll is out of question - too slow)</p> <p>Thank you, LC</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload