iPad modal <select> bug #14975
5 participants
Can you break that example down into simpler form hosted on preferably JS Bin?
You can just put all the code necessary into the Bin, haven't really looked at the repo you posted. Just something I can open in a browser without needing to clone it onto my filesystem.
cvrebert
changed the title from Major bug found on mobile devices (iOS) to iOS modal <select> bug 
Are you using iOS 8.1? Are you using an iPhone, or an iPad?
Will put up a demo link ASAP.
I'm using an iPad, iOS 8.1. But it's broken on the iPhone as well.
Demo: http://jsbin.com/furivihaho http://output.jsbin.com/jinuda/1
And source code is in the repo mentioned in my first post.
EDIT: Corrected syntax error in code.
Works fine in IOS 8 Safari 8 on iPhone. I scroll all the way down, then go back to the top, launch the modal, click the select, click done, then I can still use all the buttons and reselect the select.
I think what you're seeing is the way IOS automatically zooms the page and messes up the layout once you focus an input.
See if it happens here: http://jsbin.com/nureqa
Make sure you follow the instructions. Scroll all the way to the bottom, THEN launch the modal. Do not scroll to the very top until you want to stop the symptoms.
What seems to happen is that when the page is scrolled down and you open a select menu within a modal, it jumps the page and the visual layout on the screen no longer physically lines up with the touch hotspots.
I did read about the "The vertical Position of the touch is not passed correctly to Safari" at this answer link http://stackoverflow.com/a/26349227/1004312. I had things working fine in IOS 7 but in IOS 8 you couldn't click until you scrolled to the top (even though it was on the top). It was odd.
Hmm. Well, this is way above my head, so I'll leave it to smarter people to figure this one out. As a workaround, I'm going to have to ditch using such form controls within a modal.
This is actually an iOS problem no? It sounds super familiar to the keyboard being triggered when the modal is open. The same thing occurs—a fixed position element (the modal) is in the viewport, then something iOS-related is triggered (<select> options or keyboard) and the onscreen content is moved.
Do we close as an iOS fixed position problem?
had same problem in one of our projects. setting oveflow:hidden and position:fixed to the body (to really disable page scrolling in iOS), seems to solve it, in my case. Although posision:fixed will scroll the page to the top. iPad Mini, iOS 8.4. Looks like iOS/Safari issue still.
Was able to reproduce this on Sauce Labs in the iPad simulator running iOS 8.4.
iPad uses a different <select> menu widget than iPhone, and I couldn't manage to repro this on an iPhone.
Filed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=150079
When popping up a modal on a page that is scrolled down, then opening a
<select>within the modal, the page jumps up. All elements on the modal are shifted in a way that they no longer line up with the actual visuals. It's tough to explain, so I put together a demo:https://github.com/CaptSaltyJack/bootstrap-select-bug
Once it's broken and the modal button and dropdown no longer work, try tapping slightly above them. You'll see what I mean about the touch areas being displaced. Once you scroll to the top of the page, the modal elements work again as expected.