#4671 closed bug (fixed)

Opened July 12, 2009 04:59PM UTC

Closed October 24, 2012 09:05PM UTC

Last modified July 31, 2013 06:35PM UTC

Dialog: Modal Dialog disables vertical scroll bar in Chrome & Safari

Reported by: tomcastleman Owned by:
Priority: major Milestone: 1.10.0
Component: ui.dialog Version: 1.7.2
Keywords: modal Cc: tom.castleman@b3-it.com
Blocked by: Blocking:
Description

Hi there,

The modal dialog disables the browser vertical scroll bar in:

Safari: 4 (530.17)

Chrome: 2.0.172.33.

Clicking the scroll bar does nothing. For me this is particularly critical because the modal dialog contains a tall form and the user needs to scroll down to reach all the inputs and submit buttons. Therefore in the above browsers it is impossible to submit the form!

I presume this is not by design because this behaviour is not experienced in FF <=3.5, IE 6 / 7 / 8, or Opera (and I'm pretty sure not in previous versions of Chrome and Safari).

I am using 1.7 but the problem still persists in 1.7.2 and can be reproduced on the demo page:

http://jqueryui.com/demos/dialog/#modal

Thanks,

Tom

Attachments (0)
Change History (29)

Changed July 13, 2009 03:49AM UTC by tomcastleman comment:1

The scroll wheel on the mouse still allows the page to be scrolled as does the 'page down' key. It is just the browser scroll bar which does nothing when you click it in Chrome and Safari.

Hope this helps.

Changed November 16, 2009 08:35PM UTC by jzaefferer comment:2

milestone: TBD → 1.8

Changed December 31, 2009 10:27AM UTC by casey comment:3

The 'mousedown.dialog-overlay' bound to $(document) in $.ui.dialog.overlay.create is causing this issue.

Changed December 31, 2009 10:37AM UTC by casey comment:4

https://bugs.webkit.org/show_bug.cgi?id=19033

Changed December 31, 2009 10:47AM UTC by casey comment:5

Instead of binding the handlers to $(document), they could be bound to the overlay. The overlay covers all element with a lower z-index so just preventing bubbling would do.

Changed January 11, 2011 04:27PM UTC by jprell comment:6

There is a visual test page for this issue.

Changed May 06, 2011 03:51PM UTC by k_borchers comment:7

I have sent a pull request at https://github.com/jquery/jquery-ui/pull/209.

Thanks

Changed May 08, 2011 02:29AM UTC by k_borchers comment:8

OK, let's try that again with https://github.com/jquery/jquery-ui/pull/230.

Thanks

Changed June 15, 2011 02:03PM UTC by maets comment:9

Replying to [comment:8 k_borchers]:

OK, let's try that again with https://github.com/jquery/jquery-ui/pull/230. Thanks

Got this error on Chrome (12.0.742.100), but only on Windows XP. The link above solved the issue. Thanks :)

Changed June 20, 2011 04:57AM UTC by homelands comment:10

Replying to [comment:8 k_borchers]:

OK, let's try that again with https://github.com/jquery/jquery-ui/pull/230. Thanks

When opening a dialog with this patch, it gives javascript error "this.bind is not a function" (on Firefox 4.0)

Not always reproducible. Any chance as a timing issue there?

Changed June 22, 2011 07:42AM UTC by ours comment:11

I get this bug in Chrome 12.0.742.100 on Windows 7 x64. I applied the suggested changes and I get a JS error saying the bind method doesn't exists but it does unlock the scrollbar.

Changed June 27, 2011 02:04PM UTC by Krisp PL comment:12

_comment0: I got this problem only on Chrome Win7 (12.0.742.91) after using .load(). Chrome for Mac works fine like Safari does. I don't use modal dialog and my case is: \ a) Initially document has few divs which first two filled with content are displayed but the rest are empty and hidden (css display:none). \ b) Using appear plugin (recursively) next not displayed div is feeded with content through .load() and faded in. \ \ When document is growing, scrollbar is shrinking properly but scrolls only to the end first two divs and stucks. If I scroll further with scrollmouse (or page down or even clicking on scrollbar rail), scrollbar is following but I cannot drag it. → 1309183484868454
_comment1: I got this problem only on Chrome Win7 x64 (12.0.742.91) after using .load(). Chrome for Mac works fine like Safari does. I don't use modal dialog and my case is: \ a) Initially document has few divs which first two filled with content are displayed but the rest are empty and hidden (css display:none). \ b) Using appear plugin (recursively) next not displayed div is feeded with content through .load() and faded in. \ \ When document is growing, scrollbar is shrinking properly but scrolls only to the end first two divs and stucks. If I scroll further with scrollmouse (or page down or even clicking on scrollbar rail), scrollbar is following but I cannot drag it. → 1309184111271407
_comment2: I got this problem only on Chrome Win7 x64 (12.0.742.91) after using .load(). Chrome for Mac works fine like Safari does, what's suggesting not jQ bug, I think. I don't use modal dialog and my case is: \ a) Initially document has few divs which first two filled with content are displayed but the rest are empty and hidden (css display:none), so document is two views long. \ b) Using appear plugin (recursively) next not displayed div is feeded with content through .load() and faded in. \ \ When document is growing, scrollbar is shrinking properly but scrolls only to the end first two divs and stucks. If I scroll further with scrollmouse (or page down or even clicking on scrollbar rail), scrollbar is following but I cannot drag it. → 1309184129089145
_comment3: I got this problem only on Chrome Win7 x64 (12.0.742.91) after using .load(). Chrome for Mac works fine like Safari does, what's suggesting not jQ bug, I think. I don't use modal dialog and my case is:[[BR]] \ \ a) Initially document has few divs which first two filled with content are displayed but the rest are empty and hidden (css display:none), so document is two views long.[[BR]] \ \ b) Using appear plugin (recursively) next not displayed div is feeded with content through .load() and faded in.[[BR]] \ \ \ When document is growing, scrollbar is shrinking properly but scrolls only to the end first two divs and stucks. If I scroll further with scrollmouse (or page down or even clicking on scrollbar rail), scrollbar is following but I cannot drag it. → 1309265248645251

I got this problem only on Chrome Win7 x64 (12.0.742.91) after using .load() (jQ v1.8.13). Chrome for Mac works fine like Safari does, what's suggesting not jQ bug, I think. I don't use modal dialog and my case is:

a) Initially document has few divs which first two filled with content are displayed but the rest are empty and hidden (css display:none), so document is two views long.

b) Using appear plugin (recursively) next not displayed div is feeded with content through .load() and faded in.

When document is growing, scrollbar is shrinking properly but scrolls only to the end first two divs and stucks. If I scroll further with scrollmouse (or page down or even clicking on scrollbar rail), scrollbar is following but I cannot drag it.

Changed July 13, 2011 07:53PM UTC by gusaroni comment:13

I'm seeing this on Chrome version 12.0.742.1222 - Windows 7 x64.

A dialog is opened that is larger than the available viewport, and scrolling (via the mouse) is disabled. I am able to scroll horizontally, and vertically with the arrow keys.

Changed July 14, 2011 08:47PM UTC by kristopolous comment:14

I have a bug filed against me regarding this at the company I work at. I'd be willing to go in and fix it thus closing both bugs. What is the best way to go about doing this?

Changed July 14, 2011 08:49PM UTC by scottgonzalez comment:15

Fork the repo and send a pull request. There are more details at http://wiki.jqueryui.com/w/page/12137724/Bug-Fixing-Guide

Feel free to ask questions on that page, this ticket, IRC (#jqueryui-dev on freenode) or the forums.

Changed July 14, 2011 08:53PM UTC by kristopolous comment:16

Replying to [comment:15 scott.gonzalez]:

Fork the repo and send a pull request. There are more details at http://wiki.jqueryui.com/w/page/12137724/Bug-Fixing-Guide Feel free to ask questions on that page, this ticket, IRC (#jqueryui-dev on freenode) or the forums.

Thanks. I was just about to do that in fact ... :)

Changed August 23, 2011 06:36AM UTC by maets comment:17

Replying to [comment:10 homelands]:

Replying to [comment:8 k_borchers]: > OK, let's try that again with https://github.com/jquery/jquery-ui/pull/230. > > Thanks When opening a dialog with this patch, it gives javascript error "this.bind is not a function" (on Firefox 4.0) Not always reproducible. Any chance as a timing issue there?

Got this as well I noticed. Got rid of it (temporarily?) by adding the following check:

if (typeof this.bind == 'function') { 
  this.bind( $.ui.dialog.overlay.events, function( event ) {
    ...
  }
}

Changed September 07, 2011 12:40PM UTC by scottgonzalez comment:18

keywords: modal dialog scroll disable chrome safari → modal

Changed January 24, 2012 10:53AM UTC by PhoenixFnX comment:19

_comment0: I found a solution for Internet Explorer adding the following CSS to <html> : \ html {overflow-y: scroll;} \ \ I want it to work on Chrome ! \ Hope to see a solution soon. \ Bye → 1327402463468642

I found a solution for Internet Explorer adding the following CSS to <html> :

html {overflow-y: scroll;}

I want it to work on Chrome !

Hope to see a solution soon.

Bye

Changed October 11, 2012 02:47PM UTC by scottgonzalez comment:20

milestone: 1.9.0 → 1.10.0

Changed October 15, 2012 08:01PM UTC by dcarrith comment:21

summary: Modal Dialog disables vertical scroll bar in Chrome & Safari → Dialog: Modal Dialog disables vertical scroll bar in Chrome & Safari

Changed October 16, 2012 02:02PM UTC by petersendidit comment:22

resolution: → worksforme
status: new → closed

I am unable to recreate this bug in Chrome 20 and 21 and in Safari 5. If this is still an issue let us know which supported version of the browser it is still broken in.

Changed October 16, 2012 04:14PM UTC by Nodens comment:23

Still present in Chrome Version 22.0.1229.94 with Ubuntu 12.04

Changed October 18, 2012 12:00AM UTC by scottgonzalez comment:24

resolution: worksforme
status: closed → reopened

Changed October 18, 2012 12:00AM UTC by scottgonzalez comment:25

status: reopened → open

Changed October 24, 2012 09:05PM UTC by Nate Eagle comment:26

resolution: → fixed
status: open → closed

Dialog: Awesome new stacking and overlay implementation. Fixes the following tickets:

Fixes #3534 - Dialog: Modal dialog disables all input elements on page.

Fixes #4671 - Dialog: Modal Dialog disables vertical scroll bar in Chrome & Safari.

Fixes #4995 - Dialog: Modal Dialog's overlay dissapears in IE when content is tall.

Fixes #5388 - Dialog: Don't change z-index when already at the top.

Fixes #5466 - Dialog: "modal" Dialog Incorrectly Cancels Input Events.

Fixes #5762 - Dialog: Get rid of z-index workaround, document it instead.

Fixes #6267 - Dialog: checkboxes that inherit a z-index < jqueryui.dialog z-index don't work.

Fixes #7051 - Dialog: modal prevents tab key from moving focus off slider handle.

Fixes #7107 - Dialog: Modal dialog event loss with high zindex child elements (FF 3.6).

Fixes #7120 - Dialog: Modal operation interrupts drag drop marker functionality on gmaps.

Fixes #8172 - Dialog: Change event cancelled when opening modal dialog from another modal dialog.

Fixes #8583 - Dialog: Mouse event wrongly stopped.

Fixes #8722 - Dialog: Remove stack option.

Fixes #8729 - Dialog: Remove zIndex option.

Changeset: 3829a37ca122e923c3a08b964c4b1a946a2a1456

Changed November 08, 2012 12:46AM UTC by symve comment:27

_comment0: This issue still exists. When using Chrome, go to http://jqueryui.com/dialog/#modal \ Then make the width of the browser window smaller until you get a scrollbar in the demo area. \ \ Now click the scrollbar and drag it to the other side. It won't work. \ Now click on the up/down/left/right icons near the scrollbar. It won't work. \ \ Using keyboard navigation (arrow keys) or the scroll wheel on the mouse both do work. → 1352335873813731
_comment1: This issue still exists. When using Chrome, go to http://jqueryui.com/dialog/#modal (currently, that page uses jQuery UI - v1.9.1 - 2012-10-25). \ Then make the width of the browser window smaller until you get a scrollbar in the demo area. \ \ Now click the scrollbar and drag it to the other side. It won't work. \ Now click on the up/down/left/right icons near the scrollbar. It won't work. \ \ Using keyboard navigation (arrow keys) or the scroll wheel on the mouse both do work. → 1352336055056163

This issue still exists. When using Chrome (Version 23.0.1271.64 on Mac OS 10.6.8), go to http://jqueryui.com/dialog/#modal (currently, that page uses jQuery UI - v1.9.1 - 2012-10-25).

Then make the width of the browser window smaller until you get a scrollbar in the demo area.

Now click the scrollbar and drag it to the other side. It won't work.

Now click on the up/down/left/right icons near the scrollbar. It won't work.

Using keyboard navigation (arrow keys) or the scroll wheel on the mouse both do work.

Changed November 13, 2012 02:48AM UTC by tj.vantoll comment:28

@symve The issue has been fixed (see http://jsfiddle.net/tj_vantoll/JQWf4/) but the dialog changes aren't landing until 1.10.

Changed July 31, 2013 06:35PM UTC by liudongmin comment:29

if you don't want to update to 1.10, you can just add if (typeof this.bind == 'function') before $(document).bind($.ui.dialog.overlay.events, function (event) in Create: setTimeout.