Skip to content
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

Closed
ghost opened this issue Nov 3, 2014 · 20 comments
Closed

iPad modal <select> bug #14975

ghost opened this issue Nov 3, 2014 · 20 comments

Comments

@ghost
Copy link

ghost commented Nov 3, 2014

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.

@hnrch02
Copy link
Collaborator

hnrch02 commented Nov 3, 2014

Can you break that example down into simpler form hosted on preferably JS Bin?

@ghost
Copy link
Author

ghost commented Nov 3, 2014

How much simpler should it be?

@hnrch02
Copy link
Collaborator

hnrch02 commented Nov 3, 2014

The bare minimum to reproduce the bug.

@hnrch02
Copy link
Collaborator

hnrch02 commented Nov 3, 2014

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 cvrebert changed the title Major bug found on mobile devices (iOS) iOS modal <select> bug Nov 3, 2014
@cvrebert
Copy link
Collaborator

cvrebert commented Nov 3, 2014

Are you using iOS 8.1? Are you using an iPhone, or an iPad?

@ghost
Copy link
Author

ghost commented Nov 3, 2014

Will put up a demo link ASAP.

I'm using an iPad, iOS 8.1. But it's broken on the iPhone as well.

@ghost
Copy link
Author

ghost commented Nov 3, 2014

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.

@carasmo
Copy link

carasmo commented Nov 3, 2014

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

@ghost
Copy link
Author

ghost commented Nov 3, 2014

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.

@ghost
Copy link
Author

ghost commented Nov 3, 2014

And yes, your version also exhibits the bug.

@ghost
Copy link
Author

ghost commented Nov 3, 2014

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.

@carasmo
Copy link

carasmo commented Nov 3, 2014

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.

@ghost
Copy link
Author

ghost commented Nov 3, 2014

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.

@mdo
Copy link
Member

mdo commented Nov 9, 2014

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?

@hkailantzis
Copy link

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.

@cvrebert cvrebert added the v3 label Aug 19, 2015
@cvrebert cvrebert self-assigned this Oct 9, 2015
@cvrebert cvrebert changed the title iOS modal <select> bug iPad modal <select> bug Oct 12, 2015
@cvrebert
Copy link
Collaborator

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.

@cvrebert
Copy link
Collaborator

Still repros with iOS 9.0 and iOS 9.1 beta.

@cvrebert
Copy link
Collaborator

Filed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=150079

cvrebert added a commit that referenced this issue Oct 13, 2015
Add Wall of Browser Bugs entry for #14975
@cvrebert cvrebert removed their assignment Oct 13, 2015
@tiendq
Copy link
Contributor

tiendq commented Dec 19, 2016

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

@cvrebert
Copy link
Collaborator

Most likely the WebKit version with the fix has not yet made its way into an iOS release. Not every iOS release updates WebKit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants