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

Comments

Projects
None yet
6 participants
@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

This comment has been minimized.

Copy link
Member

hnrch02 commented Nov 3, 2014

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

@ghost

This comment has been minimized.

Copy link
Author

ghost commented Nov 3, 2014

How much simpler should it be?

@hnrch02

This comment has been minimized.

Copy link
Member

hnrch02 commented Nov 3, 2014

The bare minimum to reproduce the bug.

@hnrch02

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Member

cvrebert commented Nov 3, 2014

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

@ghost

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link
Author

ghost commented Nov 3, 2014

And yes, your version also exhibits the bug.

@ghost

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

hkailantzis commented Jul 30, 2015

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 cvrebert added the confirmed label Oct 12, 2015

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 12, 2015

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

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 12, 2015

Still repros with iOS 9.0 and iOS 9.1 beta.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 13, 2015

cvrebert added a commit that referenced this issue Oct 13, 2015

cvrebert added a commit that referenced this issue Oct 13, 2015

Merge pull request #17906 from twbs/wkbug-150079
Add Wall of Browser Bugs entry for #14975

@cvrebert cvrebert removed their assignment Oct 13, 2015

@cvrebert cvrebert closed this in a0b8cb7 Oct 13, 2015

@mdo mdo referenced this issue Oct 13, 2015

Closed

v3.3.6 ship list #16644

@cvrebert cvrebert added this to the v3.3.6 milestone Apr 20, 2016

cvrebert added a commit that referenced this issue Dec 2, 2016

@tiendq

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 19, 2016

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
You can’t perform that action at this time.