New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
iPad modal <select> bug #14975
Comments
Can you break that example down into simpler form hosted on preferably JS Bin? |
How much simpler should it be? |
The bare minimum to reproduce the bug. |
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. |
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: 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. 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. |
And yes, your version also exhibits the bug. |
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 ( 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. |
Still repros with iOS 9.0 and iOS 9.1 beta. |
Filed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=150079 |
See https://bugs.webkit.org/show_bug.cgi?id=150079 Closes #14975 [ci skip]
Add Wall of Browser Bugs entry for #14975
https://webkit.org/b/150079 has been fixed! Refs #14975 [ci skip]
Can someone confirm if this issue is fixed? I see the WebKit bug Resolved/Fixed but still experience it with BS4 (alpha 5) on iOS 10.2 |
Most likely the WebKit version with the fix has not yet made its way into an iOS release. Not every iOS release updates WebKit. |
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.
The text was updated successfully, but these errors were encountered: