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

iPhone 6+ mobile safari landscape with mulitple tabs open and bootstrap modal hides immediately after open #18859

Closed
ankitshah-hs opened this Issue Jan 12, 2016 · 6 comments

Comments

Projects
None yet
4 participants
@ankitshah-hs
Copy link

commented Jan 12, 2016

I am facing problem in bootstrap modal with iPhone safari 6+ landscape mode. This bug occurs only in iPhone 6+ landscape mode with multiple tab open in safari browser.

Below are the step to generate the bug.

  1. Goto http://getbootstrap.com/javascript/#modals-sizes on your iPhone 6+ in landscape mode - be sure you must open multiple tab
  2. Scroll down the page and click on "Small Modal" button in Optional size section.
  3. You can notice that modal is opening and closed immediately in flash and grey background remain as it is. You can't do any clicks now.
  4. Now, try to hide the Nav-bar and tab bar manually by scrolling up the page. It will show the bootstrap modal as expected. But it's not working when it open with multiple tab open in browser.
@cvrebert

This comment has been minimized.

Copy link
Member

commented Jan 13, 2016

Confirmed, with the proviso that the tab bar must be visible when you go to click the button.

You can't do any clicks now.

I could only repro that part some of the time.

@cvrebert

This comment has been minimized.

Copy link
Member

commented Jan 13, 2016

@cvrebert cvrebert added this to the v3.3.7 milestone Jan 13, 2016

cvrebert added a commit that referenced this issue Jan 13, 2016

cvrebert added a commit that referenced this issue Jan 13, 2016

Merge pull request #18869 from twbs/wkbug-153056
Add Wall of Browser Bugs entry for #18859

@cvrebert cvrebert closed this in 742d3eb Jan 13, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

commented Jan 13, 2016

And added the bug to our Wall: http://getbootstrap.com/browser-bugs/

@MickL

This comment has been minimized.

Copy link

commented Nov 16, 2016

Did anyone find any (JS-)workaround? I reported the same problem for jQuery Mobile: jquery/jquery-mobile#8539

Interestingly the invisible content is still working (modal buttons) here.

To show the elements: Scroll alot or change tab back and forth

@cvrebert

This comment has been minimized.

Copy link
Member

commented Nov 17, 2016

The team did not attempt to work around this, given how very hacky it would be, and how tricky it would be to detect the condition.

My general observation is that position: fixed; still tends to have buggy corner cases on mobile. Avoid it whenever you can.

@fstockel

This comment has been minimized.

Copy link

commented Dec 1, 2016

I ran into the exact same problem and tried to "solve it" by forcing safari to repaint/recalculate the layout -- as the dialog becomes visible if you toggle between the open browser-tabs. I tried the now classical zoom (better support) and and a few other attributes but came up with this rather ugly workaround that seems to work for this situation:

.modal.in .modal-dialog{ transform:translate3d(0px,0px,0px); }

the css3 transform property will force the repositioning of the modal.

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.