StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Actually, your issue is related to this question:</p> <blockquote> <p><a href="https://stackoverflow.com/questions/4920327/webkit-transform-issue-on-safari-using-select-elements">webkit-transform issue on safari using select elements</a></p> </blockquote> <p>When an input gains focus in iOS Safari, it checks if the input is in view. If it isn’t, Safari forcibly scrolls the document, and the element(s) which contain the input, to make it visible.</p> <p>iScroll uses a CSS transform to move the scrollable area around, and it looks like Safari’s behavior is broken for <code>select</code>s — it doesn't notice the transform, thinks that the <code>select</code> is out of view, and scrolls its container (<code>#scrollable</code>) to make it visible (again, not accounting for the transform), which puts it way out of view.</p> <p>This is fundamentally an iOS bug, and should be <a href="https://bugreport.apple.com/" rel="nofollow noreferrer">reported to Apple</a> by as many web developers as are affected by the issue! A workaround can be implemented most effectively inside iScroll, so I encourage you to report the issue to its developers.</p> <p>That said, I have come up with a workaround, which you'll find at the bottom of this answer. You can use it by calling it, once, with your instance of iScroll:</p> <pre><code>workAroundiScrollSelectPositioning(myScroll); </code></pre> <p>A live demo is at your jsbin paste <a href="http://jsbin.com/unese4/14/" rel="nofollow noreferrer">here</a>. It triggers when a <code>select</code> gains focus, and does three things:</p> <ol> <li><p>Remembers the scroll position, and tells iScroll to immediately scroll to the top left corner (removing any transform), and sets the <code>top</code> and <code>left</code> CSS properties of the scroll area to the current scroll position. Visually, everything looks the same, but the scroll area is now positioned in a way that Safari will see.</p></li> <li><p>Block iScroll from seeing any touches (this is ugly, but it stops iScroll from applying a transform on the scroll area while we have it repositioned).</p></li> <li><p>When the <code>select</code> loses focus, put everything back to the way it was (restore the original position and transform and stop blocking iScroll).</p></li> </ol> <p>There are still cases where the element's position can get screwed up (e.g. when a <code>textarea</code> has focus but is only partially in view, and you type and cause Safari to try to bring the rest of it in view), but these are best fixed in iScroll.</p> <hr> <pre><code>function workAroundiScrollSelectPositioning(iscroll){ iscroll.scroller.addEventListener('focusin', function(e){ if (e.target.tagName === 'SELECT') { var touchEvent = 'ontouchstart' in window ? 'touchmove' : 'mousemove', touchListener = { handleEvent: function(e){ e.stopPropagation(); e.stopImmediatePropagation(); } }, blurListener = { oldX: iscroll.x, oldY: iscroll.y, handleEvent: function(e){ iscroll.scroller.style.top = ''; iscroll.scroller.style.left = ''; iscroll.scrollTo(this.oldX, this.oldY, 0); e.target.removeEventListener('blur', blurListener, false); iscroll.scroller.removeEventListener(touchEvent, touchListener, true); } }; iscroll.scroller.style.top = iscroll.y + 'px'; iscroll.scroller.style.left = iscroll.x + 'px'; iscroll.scrollTo(0, 0, 0); e.target.addEventListener('blur', blurListener, false); iscroll.scroller.addEventListener(touchEvent, touchListener, true); } }, false); } </code></pre>

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