Vertical scrolling buggy when modal height larger than browser window in Chrome on Nexus 7 #13628

henrywright · 2014-05-19T19:23:00Z

I'll try my best to explain this one...

When a modal is larger than the height of the browser in Chrome on my Google Nexus 7 and I try to scroll down using a finger swipe, unless my finger is touching the actual modal when I swipe, the modal does not scroll.

To reproduce:

Set up a modal-sm sized modal with lots of content in it so that the modal height is larger than the browser window.
Attempt to scroll down by finger swiping but make sure you finger swipe outside of the .modal element.

Scrolling doesn't seem to happen.

However, if you retry step 2 but ensure you finger swipe downwards inside the .modal element, scroll will work.

The text was updated successfully, but these errors were encountered:

cvrebert · 2014-05-19T19:54:18Z

What version of Chrome? What version of Android? You're using Bootstrap v3.1.1, correct?

henrywright · 2014-05-19T22:02:08Z

Sorry, yes.

Bootstrap 3.1.1
Android 4.4.2
Chrome 34.0.1847.114

henrywright · 2014-05-19T22:32:08Z

Just to add, I did some cross-browser testing in FireFox 29.0.1 and the problem does not exist there.

cvrebert · 2014-05-22T05:22:26Z

Testcase: http://jsfiddle.net/vvZdg/2/show/

cvrebert · 2014-05-22T05:25:51Z

I am unable to reproduce the issue with Android 4.4.2 on a Nexus 10 using Chrome 34.0.1847.114.

cvrebert · 2014-05-22T05:27:22Z

@henrywright Can you check whether the testcase I posted works for you or not?

henrywright · 2014-05-22T13:08:56Z

@cvrebert just tested the example you set up which works for me. I also set up my own test case http://jsfiddle.net/K9Dar/show/ which uses the default Bootstrap markup. This also works for me. Closing this until I can better pinpoint the problem (if there is one)

kntmrkm · 2014-12-20T11:07:21Z

In my case, It happens when add below script to prevent body scrolling.
I have followed this doc.
http://getbootstrap.com/getting-started/#support-fixed-position-keyboards

  var modal = $('.modal');
  if (Modernizr.touch) {
    $(document).on('show.bs.modal', function(e) {
      scrollLocation = $(window).scrollTop();
      modal.css({
        marginTop: scrollLocation + 'px',
        position: 'absolute',
        bottom: 'auto'
      });
  }

I have tested in below environment.

Bootstrap-sass(Rails gem) 3.3.1.0
Genymotion 2.3.1
Samsung Galaxy S5 4.4.4
- Android browser (default) ver 4.4.4-eng.buildbot.20141001.101335
- This browser is chrome's version? right?
Google Nexus 7 2013 default Android Browser can't scroll too.

On the other version, Sumsung Galaxy S2 4.1.1 is works well.
That is a Non-Chrome Android Browser.

Adding to above, Google Nexus 7 - 5.0.0 is works well.
Just 4.4.4 version is problem maybe.

Chome version detail (Defualt Android Browser)

Android 4.1.1 : Android 4.0.0 → able to scroll
Android 4.2.2 : Android 4.0.0 → able to scroll
Android 4.3 : Android 4.0.0 → able to scroll
Android 4.4.4 : Chrome 33.0.0.0 → unable to scroll
Android 5.0.0 : Chrome 37.0.0.0 → able to scroll

jsfiddle is
http://jsfiddle.net/kntmrkm/kauhLbk0/3/show/

sorry. Above fiddle can't reproduce mobile view. so iOS safari can not scroll too.

cwohlman · 2015-01-13T15:34:09Z

I've got a reproduction for this bug on Chrome desktop, but it depends on bootboxjs... http://embed.plnkr.co/7oLaRa9LUpwc7D0OSUJ3/preview

twbs-lmvtfy · 2015-01-13T15:34:12Z

Hi @cwohlman!

You appear to have posted a live example (http://run.plnkr.co/plunks/7oLaRa9LUpwc7D0OSUJ3/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

W001: <head> is missing UTF-8 charset <meta> tag
W002: <head> is missing X-UA-Compatible <meta> tag that disables old IE compatibility modes
W003: <head> is missing viewport <meta> tag that enables responsiveness
line 5, column 5: W013: Bootstrap version might be outdated. Latest version is at least 3.3.1 ; saw what appears to be usage of Bootstrap 3.2.0
line 7, column 5: W013: Bootstrap version might be outdated. Latest version is at least 3.3.1 ; saw what appears to be usage of Bootstrap 3.2.0

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.)

cwohlman · 2015-01-13T15:43:52Z

How about this:

http://plnkr.co/edit/7oLaRa9LUpwc7D0OSUJ3

twbs-lmvtfy · 2015-01-13T15:43:55Z

Hi @cwohlman!

You appear to have posted a live example (http://run.plnkr.co/plunks/7oLaRa9LUpwc7D0OSUJ3/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

W003: <head> is missing viewport <meta> tag that enables responsiveness
line 8, column 5: W013: Bootstrap version might be outdated. Latest version is at least 3.3.1 ; saw what appears to be usage of Bootstrap 3.2.0
line 10, column 5: W013: Bootstrap version might be outdated. Latest version is at least 3.3.1 ; saw what appears to be usage of Bootstrap 3.2.0

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.)

cwohlman · 2015-01-13T15:59:35Z

http://run.plnkr.co/plunks/7oLaRa9LUpwc7D0OSUJ3/

cvrebert · 2015-02-28T05:22:45Z

If there's any issue here still present in v3.3.2, please open a new issue.
Also, in general, we advise against commenting on issues that were closed over 6 months ago as nobody is likely to be watching them anymore, and your comments will thus go unheard.

cvrebert added the css label May 19, 2014

cvrebert added this to the v3.2.1 milestone May 19, 2014

henrywright changed the title ~~Vertical scrolling buggy when model height larger than browser window in on Nexus 7~~ Vertical scrolling buggy when model height larger than browser window in Chrome on Nexus 7 May 19, 2014

cvrebert changed the title ~~Vertical scrolling buggy when model height larger than browser window in Chrome on Nexus 7~~ Vertical scrolling buggy when modal height larger than browser window in Chrome on Nexus 7 May 20, 2014

cvrebert removed this from the v3.2.1 milestone May 22, 2014

henrywright closed this as completed May 22, 2014

cwohlman mentioned this issue Jan 13, 2015

Calling bootbox.dialog from within callback triggers scrolling bug in chrome bootboxjs/bootbox#376

Closed

twbs locked and limited conversation to collaborators Feb 28, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vertical scrolling buggy when modal height larger than browser window in Chrome on Nexus 7 #13628

Vertical scrolling buggy when modal height larger than browser window in Chrome on Nexus 7 #13628

henrywright commented May 19, 2014

cvrebert commented May 19, 2014

henrywright commented May 19, 2014

henrywright commented May 19, 2014

cvrebert commented May 22, 2014

cvrebert commented May 22, 2014

cvrebert commented May 22, 2014

henrywright commented May 22, 2014

kntmrkm commented Dec 20, 2014

cwohlman commented Jan 13, 2015

twbs-lmvtfy commented Jan 13, 2015

cwohlman commented Jan 13, 2015

twbs-lmvtfy commented Jan 13, 2015

cwohlman commented Jan 13, 2015

cvrebert commented Feb 28, 2015

Vertical scrolling buggy when modal height larger than browser window in Chrome on Nexus 7 #13628

Vertical scrolling buggy when modal height larger than browser window in Chrome on Nexus 7 #13628

Comments

henrywright commented May 19, 2014

cvrebert commented May 19, 2014

henrywright commented May 19, 2014

henrywright commented May 19, 2014

cvrebert commented May 22, 2014

cvrebert commented May 22, 2014

cvrebert commented May 22, 2014

henrywright commented May 22, 2014

kntmrkm commented Dec 20, 2014

cwohlman commented Jan 13, 2015

twbs-lmvtfy commented Jan 13, 2015

cwohlman commented Jan 13, 2015

twbs-lmvtfy commented Jan 13, 2015

cwohlman commented Jan 13, 2015

cvrebert commented Feb 28, 2015