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

iOS 8.x modal scroll issue #14839

Closed
kerryusry opened this Issue Oct 21, 2014 · 72 comments

Comments

Projects
None yet
@kerryusry
Copy link

kerryusry commented Oct 21, 2014

Modal scrolling appears to be broken in iOS 8, but only in some cases. If I fill a modal with something simple like a bunch of text in paragraph tags it can handle it, but anything else like a grid stops scrolling and the background page scrolls. The same content in iOS 7 no problems. Wondering if the issue is known and if there is any kind of workaround I am stumped.

@cvrebert cvrebert added the css label Oct 21, 2014

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 21, 2014

Does this happen with the "Live demo" modal on http://getbootstrap.com/javascript/#modals ?
If not, please post a live example (e.g. JS Bin) that demonstrates the problem.

@kerryusry

This comment has been minimized.

Copy link
Author

kerryusry commented Oct 21, 2014

The "Live demo" modal does not demonstrate the problem, and that may be because of the fairly simple markup contained in there. I would post a live example of the problem but mine is fairly complex and could make it hard to determine the issue, I will try and throw together a simpler example that demonstrates the issue and post it.

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Oct 26, 2014

Closing until we hear more with a reduced live example. Just ping us here and we can re-open.

@mdo mdo closed this Oct 26, 2014

@k3nd477

This comment has been minimized.

Copy link

k3nd477 commented Oct 27, 2014

I've encountered this on the following page:
http://atlassolutions.com/ (the I'm interested link at the bottom of the page)

It pops open a modal with a contact form on it. It seems like the scrolling issue happens specifically after validation.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 27, 2014

@vigilanteweb Could you please reduce that to a minimal JS Bin?

@k3nd477

This comment has been minimized.

Copy link

k3nd477 commented Oct 28, 2014

Here is a link to a JS Bin with the appropriate code in it. http://jsbin.com/riyejibaba/1/

@twbs-lmvtfy

This comment has been minimized.

Copy link

twbs-lmvtfy commented Oct 28, 2014

Hi @vigilanteweb!

You appear to have posted a live example (http://jsbin.com/riyejibaba/1/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

  • line 38, column 124: Bad value navigation for attribute role on element ul.
  • line 69, column 8: Stray end tag div.
  • line 70, column 7: Stray end tag div.
  • line 107, column 104: Bad value generator nofollow for attribute rel on element a: The string generator is not a registered keyword.
  • line 201, column 46: Duplicate attribute id.
  • line 294, column 22: Bad value `for attribute` for `on element` label: An ID must not be the empty string.
  • line 306, column 110: Attribute aria-required not allowed on element input at this point.
  • line 312, column 110: Attribute aria-required not allowed on element input at this point.
  • line 318, column 110: Attribute aria-required not allowed on element input at this point.
  • line 336, column 28: Bad value `for attribute` for `on element` label: An ID must not be the empty string.
  • line 207, column 25: The for attribute of the label element must refer to a form control.
  • line 294, column 22: The for attribute of the label element must refer to a form control.
  • line 336, column 28: The for attribute of the label element must refer to a form control.
  • line 352, column 40: The for attribute of the label element must refer to a form control.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 28, 2014

@vigilanteweb Please further reduce the amount of irrelevant code in the Bin. Thanks!

@k3nd477

This comment has been minimized.

Copy link

k3nd477 commented Oct 29, 2014

@twbs-lmvtfy

This comment has been minimized.

Copy link

twbs-lmvtfy commented Oct 29, 2014

Hi @vigilanteweb!

You appear to have posted a live example (http://jsbin.com/yimugaxaho/1/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

  • line 108, column 46: Duplicate attribute id.
  • line 201, column 22: Bad value `for attribute` for `on element` label: An ID must not be the empty string.
  • line 213, column 110: Attribute aria-required not allowed on element input at this point.
  • line 219, column 110: Attribute aria-required not allowed on element input at this point.
  • line 225, column 110: Attribute aria-required not allowed on element input at this point.
  • line 243, column 28: Bad value `for attribute` for `on element` label: An ID must not be the empty string.
  • line 114, column 25: The for attribute of the label element must refer to a form control.
  • line 201, column 22: The for attribute of the label element must refer to a form control.
  • line 243, column 28: The for attribute of the label element must refer to a form control.
  • line 259, column 40: The for attribute of the label element must refer to a form control.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@cvrebert cvrebert reopened this Oct 29, 2014

@cvrebert cvrebert added this to the v3.3.1 milestone Oct 29, 2014

@carasmo

This comment has been minimized.

Copy link

carasmo commented Oct 29, 2014

@vigilanteweb -- does it happen with this fork http://jsbin.com/kiwela/1

@twbs-lmvtfy

This comment has been minimized.

Copy link

twbs-lmvtfy commented Oct 29, 2014

Hi @carasmo!

You appear to have posted a live example (http://jsbin.com/kiwela/1/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

  • line 108, column 46: Duplicate attribute id.
  • line 201, column 22: Bad value `for attribute` for `on element` label: An ID must not be the empty string.
  • line 213, column 110: Attribute aria-required not allowed on element input at this point.
  • line 219, column 110: Attribute aria-required not allowed on element input at this point.
  • line 225, column 110: Attribute aria-required not allowed on element input at this point.
  • line 243, column 28: Bad value `for attribute` for `on element` label: An ID must not be the empty string.
  • line 114, column 25: The for attribute of the label element must refer to a form control.
  • line 201, column 22: The for attribute of the label element must refer to a form control.
  • line 243, column 28: The for attribute of the label element must refer to a form control.
  • line 259, column 40: The for attribute of the label element must refer to a form control.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@k3nd477

This comment has been minimized.

Copy link

k3nd477 commented Oct 29, 2014

@carasmo Yes it does. IT appears that there isn't any validation in that fork, but it does still have the scroll issue.

@reil86

This comment has been minimized.

Copy link

reil86 commented Nov 7, 2014

Hello, I'm new to this, but I am having a scrolling issue as well. On IOS8 with a simple modal with an image and content. Here is a working example. If you click on some of the longer images you'll notice the issue: http://designinspiration.com/

@hnrch02 hnrch02 added the confirmed label Nov 8, 2014

@hnrch02

This comment has been minimized.

Copy link
Member

hnrch02 commented Nov 8, 2014

I can repro on http://getbootstrap.com/javascript/#modals with iOS 8.1.

@hnrch02 hnrch02 modified the milestones: v3.3.2, v3.3.1 Nov 11, 2014

@ghost

This comment has been minimized.

Copy link

ghost commented Nov 25, 2014

i had the same issue after focusing on any input/textarea element in modal. try to remove '-webkit-overflow-scrolling: touch' property for '.modal'. it helped me to solve the problem.

@poteto

This comment has been minimized.

Copy link

poteto commented Nov 26, 2014

+1 removing -webkit-overflow-scrolling: touch fixed the problem

@carasmo

This comment has been minimized.

Copy link

carasmo commented Nov 26, 2014

Really excellent fix!

piersg added a commit to piersg/Bootstrap3-Webmin-Theme that referenced this issue Dec 12, 2014

Fix iOS (WebKit touch?) scrolling
TL;DR: overflow scrolling doesn't work on my iPad. This fixes it (but I don't know what it breaks)

... but it does work on Android phones and iPhones. Was broken on Safari and Chrome (iOS 7)

Hypothesis:
This is an iframe overflow scroll issue, it's not seen on smaller screens as the navbar gets collapsed (so no iframe?). WebKit appears to not want to let overflowed iframes scroll on touch devices by default. See refs at end for more info.

The changes made here make scrolling work on said iPad and do not appear to break anything on my phones or desktop, but this is hardly my area of expertise so I would call these changes very much "use at own risk, and TEST". Changing 'overflow' from 'hidden' to 'scroll' is pretty much the opposite, so if it was set to 'hidden' to enable some functionality, I just broke it!

I also haven't tested the change in iOS 8, but the last article (in my refs, below) indicates, possibly, that Apple have changed the way the property behaves.

Lastly I wonder if it might be a better long-term fix to find a way of doing the side navbar without introducing iframes - we might be able to avoid some vendor CSS.

I looked for "bootstrap iOS scroll issues" and found the following which pointed me towards the overflow scroll fix:
twbs/bootstrap#3361
twbs/bootstrap#14839
@dongepulango

This comment has been minimized.

Copy link

dongepulango commented Jan 3, 2015

I haven't seen someone pointed out that you can't scroll pass the modal footer buttons, it's impossible to click it because bounces back when you scroll.
I think this only happens when the text/content of the modal is beyond the screen size. Only way to get out is to pinch to zoom out. I saw it on the Docs live demo.

@hugohenrique

This comment has been minimized.

Copy link

hugohenrique commented Jan 15, 2015

I created a new version with the fix I simplified by removing the transitions.

@mdo mdo removed this from the v3.3.2 milestone Jan 19, 2015

@mdo mdo closed this Nov 15, 2015

@cvrebert cvrebert removed their assignment Nov 15, 2015

@moodysalem

This comment has been minimized.

Copy link

moodysalem commented Nov 15, 2015

The fix I've settled on is the position:fixed, width:100% on the modal-open class, plus using javascript to set the top css style on the body (so scroll position does not appear to change) and then scrolling to that "top" when the modal is closed.

This is what that looks like with the react modal I'm using. It appears to work pretty well.

  componentWillReceiveProps: function (nextProps) {
    if (this.isMounted()) {
      var st;
      var body = $("body");
      if (nextProps.open && !this.props.open) {
        st = $(window).scrollTop();
        body.addClass("modal-open").css("top", st * -1);
      } else if (!nextProps.open && this.props.open) {
        st = parseInt(body.css("top")) * -1;
        body.removeClass("modal-open").css("top", "");
        if (!isNaN(st)) {
          window.requestAnimationFrame(function () {
            $(window).scrollTop(st);
          });
        }
      }
    }
  },

I also had to make a change to force a repaint after the modal is displayed and disable animation in Safari because of a bug with a modal nested in a table cell not being drawn correctly..
https://raw.githubusercontent.com/moodysalem/react-backstrap/master/src/main/resources/META-INF/resources/rbs/components/layout/Modal.js

@nadzic

This comment has been minimized.

Copy link

nadzic commented Nov 22, 2015

It is more than one year now and we do not have solution yet. Anyone maybe succeeded ?

@nadzic

This comment has been minimized.

Copy link

nadzic commented Nov 23, 2015

I solved it. The problem is with the overflow and position. If you want that is going to work perfect in Safari (apple devices) you have to do next things:

.modal {
overflow: initial;
position: static;
}

So, in case if i forgot anything from there, I recommend to check if most of elements inside modal window are static.

I hope it is going to help you.

@Webtransformer

This comment has been minimized.

Copy link

Webtransformer commented Nov 26, 2015

I have tried different solutions and ended up with removing the:
-webkit-overflow-scrolling: touch;
It even works with modal in modal.

Attention...if you use the following code then links in the modal to anchors (same page) doesnt work on some devices (iphone 4, ipad mini, ipad air):

@media only screen and (max-device-width:768px){

body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
}

body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}

body {
overflow-x: hidden;
overflow-y: scroll !important;
}

@comapedrosa

This comment has been minimized.

Copy link

comapedrosa commented Dec 22, 2015

This worked for me:

.modal {
    -webkit-overflow-scrolling: auto
}
@Taewa

This comment has been minimized.

Copy link

Taewa commented Jan 29, 2016

Thanks @comapedrosa !!

@drakej

This comment has been minimized.

Copy link

drakej commented Feb 2, 2016

The fix from @comapedrosa is working for me on iOS 9.x with the iPhone 6S.

@Nintex

This comment has been minimized.

Copy link

Nintex commented Feb 3, 2016

I fixed this for UI Kit using the following CSS. Basically a combination of some of the fixes above.

@media only screen and (max-device-width:768px) {
.uk-modal-page body {
overflow: hidden;
position: fixed;
width:100%;
}
}
.uk-notouch.uk-modal-page body {
width:100%;
}
body {
overflow-x: hidden;
overflow-y: scroll !important;
width:100%;
padding:0;
margin:0;
}

This might work on Bootstrap too if you change some of the classes.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Feb 4, 2016

This issue seems to muddle together what might be multiple similar but separate underlying bugs, but anyway, filed a relevant WebKit/Safari bug: https://bugs.webkit.org/show_bug.cgi?id=153852

cvrebert added a commit that referenced this issue Feb 4, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Feb 4, 2016

Also filed a separate bug for the "scrolling starting within a text field scrolls the <body> instead of the modal" problem, which I believe is what
@vigilanteweb referred to in #14839 (comment)
and @brycepj referred to in #14839 (comment)

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

@Jeff-P

This comment has been minimized.

Copy link

Jeff-P commented Feb 9, 2016

Worked for me @comapedrosa Thank you
.modal {
-webkit-overflow-scrolling: auto
}

@castiweb

This comment has been minimized.

Copy link

castiweb commented Feb 12, 2016

I solved it (I hope!) with jquery. When the modal is "visible" I've settled the HTML and BODY height as the windows screen size and overflow: hidden:
$('body').height($(window).height()); $('html').height($(window).height()); $('body').css('overflow','hidden'); $('html').css('overflow','hidden');

@happy2deepak

This comment has been minimized.

Copy link

happy2deepak commented Feb 12, 2016

@castiweb not working for me! issue still persists! and it also affects Sticky Footer on responsive websites.

@castiweb

This comment has been minimized.

Copy link

castiweb commented Feb 12, 2016

@happy2deepak I think you're right! Maybe the best way is the css rule to subscibe bootstrap declaration:
.modal-open {
position: fixed;
}
In an other projet this solution works fine for me.

@happy2deepak

This comment has been minimized.

Copy link

happy2deepak commented Feb 12, 2016

@castiweb yeah! Thanks. this works for me to an extent ! Though I will need to handle my Sticky Footer manually, but for time-being i can enter input values and scroll on the iOS devices

@digitalhuman

This comment has been minimized.

Copy link

digitalhuman commented Feb 29, 2016

This fixed it for me on iPhone 4s and above

.modal
{
    -webkit-overflow-scrolling: auto !important;
    overflow-y: auto !important;
}

cvrebert added a commit that referenced this issue Mar 11, 2016

Port #19088 to v3
Add Wall of Browser Bugs entry for https://webkit.org/b/153856

Refs #14839 (comment)
[ci skip]

cvrebert added a commit that referenced this issue Mar 14, 2016

@cvrebert cvrebert added the v4 label Mar 14, 2016

@twbs twbs locked and limited conversation to collaborators Mar 14, 2016

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.