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

[tomcastleman]

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

[tomcastleman]

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.

[casey]

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

[casey]

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

[casey]

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.

[jprell]

There is a ​visual test page for this issue.

[k_borchers]

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

Thanks

[k_borchers]

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

Thanks

[maets]

Replying to 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 :)

[homelands]

Replying to 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?

[ours]

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.

[Krisp PL]

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.

[gusaroni]

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.

[kristopolous]

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?

[Scott González]

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.

[kristopolous]

Replying to 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 ... :)

[maets]

Replying to homelands:

Replying to 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 ) {
    ...
  }
}

[PhoenixFnX]

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

[petersendidit]

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.

[Nodens]

Still present in Chrome Version 22.0.1229.94 with Ubuntu 12.04

[Nate Eagle]

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

[symve]

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.

[tj.vantoll]

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

[liudongmin]

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.