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

[ankitshah-hs]

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]

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]

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

[cvrebert]

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

[MickL]

Did anyone find any (JS-)workaround? I reported the same problem for jQuery Mobile: https://github.com/jquery/jquery-mobile/issues/8539

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

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

[cvrebert]

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]

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.