Modal disappears in iOS #4860

torstah · 2012-08-30T15:22:29Z

So I don't know how to do a JSFiddle for this but the same issue can be recreated here: http://twitter.github.com/bootstrap/javascript.html#modals

If I try the live demo button, the modal appears and then goeas away. The background is still "faded" or dimmed, the modal can be seen a flickering in but then is gone. It can't be found by scrolling to the bottom or top of the page either...

I have this issue on a iPhone 4s, iOS 5.1

Anyone else have the same problem?

Thanks

/T

berryp · 2012-08-31T16:40:53Z

I have a similar (if not identical) issue in the Android 4.0.4 stock browser, where the modal backdrop fades in but there is no modal. However, if I touch anywhere on the screen it appears. I don't get any flicker but it may just be a difference in the rendering behaviour between the iOS and Android browsers.

demike · 2012-09-02T05:24:08Z

I think I found the problem.
Try this on a Desktop Browser: (Chrome or Firefox ...)

Go to http://twitter.github.com/bootstrap/javascript.html#modals
Maximize the browser window
open the dialog
select the modal in firebug (or similar)
reduce the window size till the modal disappears
then remove the
.modal.fade.in {
top: auto;
}
and the dialog will appear again (wrong positioned but it is there)

So the top:auto is the problem

jlovison · 2012-09-02T07:03:12Z

Just adding a confirmation that the issue is the responsive bootstrap's media query that sets .modal.fade.in { top: auto }.

I fixed this issue in my own project by overriding with my own media query:

@media (max-width: 767px) {
#content .modal.fade.in {
top: 5%;
}
}

Now on mobile devices the modal animates in and stops at the top of the screen.

aurril · 2012-09-05T11:12:19Z

Just adding a confirmation that the issue is the responsive bootstrap's media query that sets .modal.fade.in { top: auto }.

I fixed this issue in my own project by overriding with my own media query:

@media (max-width: 767px) {
#content .modal.fade.in {
top: 5%;
}
}

Now on mobile devices the modal animates in and stops at the top of the screen.

This did not fix the issue at hand. With

@media (max-width: 767px) {
  #content .modal.fade.in {
    top: 50%;
  }
}

the modal was at least vertically centered. But the calculation of the margin-left seems to be off as it is partly outside of the browsers window.

jlovison · 2012-09-06T09:54:03Z

@aurril Is your modal HTML inside of grid-based code? I've noticed that Bootstrap's responsive CSS ends up a bit funky with fluid grids and offsets. I'd had a similar issue at one point with modals appearing not horizontally centered, and determined that it was due to the parent elements' classes.

Try setting up an area outside of the rest of your DOM to place the HTML and see if it still causes problems.

aurril · 2012-09-06T10:22:10Z

It is not inside a fluid grid. But the parent is the static grids container div.
Edit:
Just tried to place it outside of the container and it was even worse. Now my custom CSS got overwritten by bootstrap and the margin-left was still calculated wrong. On a side note, it really seems to have something to do with the responsive css and js.

jlovison · 2012-09-06T10:31:02Z

@aurril I would suggest removing the initial <div> for the modal from any parent other than <body>.

You can get a better idea of what is causing it to be misaligned by resizing your browser more narrow than 767px and then using something like Chrome's Web Inspector to examine it. It's very likely that the responsive css is the source of the misalignment.

aurril · 2012-09-06T10:38:17Z

@kromem That would most likely be just a temporary workaround. Fact is that the code to calculate the margin-left has a bug that needs to be fixed. This afternoon I will try to place the modal inside the body and see if it works around the issue at hand.

jlovison · 2012-09-06T10:56:35Z

@aurril Mis-typed...I mean without a parent other than body (fixed in edit).

And yes, there are actually a fair number of design choices (more polite way of saying "weirdness"?) with the bootstrap-responsive.css. On my project I've had to overwrite a fair number of the rules. Much of the strange behavior seems (after reading through official responses to bugs here and there) to relate to a desire by the Bootstrap team to support legacy mobile browsers that didn't correctly handle things like position: fixed and other related markup. The downside of this legacy support is that some of the workarounds introduce unexpected and fragile rules that are occasionally counter-intuitive (i.e. navbar-fixed-top is no longer fixed in responsive views).

So it's possible that the way responsive views handles offsets is a bug, or it might be a workaround that doesn't behave well when the .modal.fade.in hack is thrown into the mix. And I would expect (hope) that everything discussed in this thread is a temporary workaround and that in the future the modal code will work as intended "out-of-the-box". My hack is exactly that - a hack. It is certainly not a permanent solution, but for some it is hopefully better than nothing while a comprehensive fix is put in place.

abreu-dev · 2012-09-08T05:06:50Z

@aurril with "top: 50%" you will have problems if you have a large modal size. I have no issues with margin-left, do you have the same behavior with bootstrap docs?

I had fixed the issue with this:

@media (max-width: 767px) {
  div.modal { // Added more weight to the selector to override
    &.fade { top: -100px; }
    &.fade.in { top: 20px; }
  }
}

aurril · 2012-09-09T13:46:47Z

@andreabreu98 I'm using the modal to display images in a gallery like fashion. In the docs the modal body has a fixed height of 400px, which I do not have. Using "top: 5%" the modal is partly invisible as it is too high.
I can try your propostion and see if it helps.

joshuacronemeyer · 2012-09-17T16:33:11Z

This was originally filed as bug number 4658 but was summarily closed because they didn't provide a fiddle. IMHO no fiddle should be necessary when you can reproduce it on bootstrap's homepage.

andriijas · 2012-09-17T20:02:12Z

It might sound like a no brainier but keep in mind they have the rules to make it easier for us, contributers to contribute and for them, fat and mdo, easier to maintain the most popular open source project in the world. The easiest thing you can do is just submitting a pull request. There is fix above in the comments.

Sent from my frank phone, mhm

On Monday 17 September 2012 at 18:33, Josh wrote:

This was originally filed as bug number 4658 but was summarily closed because they didn't provide a fiddle. IMHO no fiddle should be necessary when you can reproduce it on bootstrap's homepage.

—
Reply to this email directly or view it on GitHub (#4860 (comment)).

andrewdeandrade · 2012-09-26T23:50:28Z

Hey @torstah,

Thanks for opening this issue! Unfortunately, it looks like it fails to pass the criteria neccessary for submitting to bootstrap. The following things are currently failing:

should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!

andriijas · 2012-09-27T09:38:58Z

Hey @malandrew

This issue is not possible to reproduce with jsfiddle, because jsfiddle overides how modals are behaving since you are not running in a full browser window.

Go to http://twitter.github.com/bootstrap/javascript.html#modals
Maximize the browser window
open the dialog
reduce the window size till the modal disappears

andriijas mentioned this issue Sep 27, 2012

Making modal work with max width 767px - fixes #4860 #5312

Merged

mdo closed this as completed in ecbb0ed Oct 1, 2012

stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014

(less) Making modal work with max width 767px - fixes twbs#4860

157cd0b

stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

(less) Making modal work with max width 767px - fixes twbs#4860

7b1aa73

snyk-bot mentioned this issue Apr 13, 2021

[Snyk] Fix for 1 vulnerabilities javakian/bootstrap#8

Open

This was referenced Apr 26, 2021

[Snyk] Fix for 1 vulnerabilities Tripooly/bootstrap#35

Open

[Snyk] Fix for 1 vulnerabilities javakian/bootstrap#9

Open

[Snyk] Fix for 1 vulnerabilities TheLOGOGuy/bootstrap#36

Open

[Snyk] Fix for 1 vulnerabilities phungmobile2/bootstrap#29

Open

This was referenced Sep 16, 2021

[Snyk] Fix for 1 vulnerabilities javakian/bootstrap#20

Open

[Snyk] Fix for 1 vulnerabilities baby636/doughkit#44

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modal disappears in iOS #4860

Modal disappears in iOS #4860

torstah commented Aug 30, 2012

berryp commented Aug 31, 2012

demike commented Sep 2, 2012

jlovison commented Sep 2, 2012

aurril commented Sep 5, 2012

jlovison commented Sep 6, 2012

aurril commented Sep 6, 2012

jlovison commented Sep 6, 2012

aurril commented Sep 6, 2012

jlovison commented Sep 6, 2012

abreu-dev commented Sep 8, 2012

aurril commented Sep 9, 2012

joshuacronemeyer commented Sep 17, 2012

andriijas commented Sep 17, 2012

andrewdeandrade commented Sep 26, 2012

andriijas commented Sep 27, 2012

Modal disappears in iOS #4860

Modal disappears in iOS #4860

Comments

torstah commented Aug 30, 2012

berryp commented Aug 31, 2012

demike commented Sep 2, 2012

jlovison commented Sep 2, 2012

aurril commented Sep 5, 2012

jlovison commented Sep 6, 2012

aurril commented Sep 6, 2012

jlovison commented Sep 6, 2012

aurril commented Sep 6, 2012

jlovison commented Sep 6, 2012

abreu-dev commented Sep 8, 2012

aurril commented Sep 9, 2012

joshuacronemeyer commented Sep 17, 2012

andriijas commented Sep 17, 2012

andrewdeandrade commented Sep 26, 2012

andriijas commented Sep 27, 2012