Dialog is not displayed on the screen under chrome - problem with overlays

[fiedzia]

Case: Simple page with modal dialog and any jquery-ui theme, which works properly under Firefox. When page is visited with chrome it works - for the first time. Subsequent displays cause dialog to disappear.

I have narrowed it down as much as i could: ​http://blueone.pl/~fiedzia/jquery_dialog/broken_dialog/fangofmongo.html

Go there with chrome browser and you will probably see dialog. Refresh page, and dialog stops showing any more.

Removing overlays from theme css fixes the problem, fixed version is here:

​http://blueone.pl/~fiedzia/jquery_dialog/working_dialog/fangofmongo.html

diff on jquery-ui-1.8.custom.css: (lines which i have removed in order to make it working):

37d36 < .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 285,287d283 < .ui-widget-overlay { background: #666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat; opacity: .50;filter:Alpha(Opacity=50); } < .ui-widget-shadow { margin: -5px 0 0 -5px; padding: 5px; background: #000000 url(images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

[fiedzia]

I am attaching both examples.

[fiedzia]

Delaying creation of the dialog into $(window).load also fixes the problem.

[Scott González]

Works fine for me. Possibly a bug in older versions of Chrome.

[Scott González]

Milestone TBD deleted