Dialog: Modal Overlay shows horizontal gap in background for Firefox 15/16

[kjauslin]

To reproduce: open the following themeroller URL below. In the section "Overlay and Shadow Classes", you can see that the background gray is separated by a transparent bar - instead of one background box.

In Webkit Browsers (Chrome, ...) everything looks fine. So this might also be an inconsistency in Firefox.

​http://jqueryui.com/themeroller/#ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=000000&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=66&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px

[kjauslin]

I added an example on jsBin to illustrate the problem: ​http://jsbin.com/udenaz/1/edit

[kjauslin]

Further analysis shows that this is not a specific jquery issue. Firefox somehow does not override the later definition for the background. If you explicitely clear the previous background, everything will work (maybe this has something to do with the specific multiple background implementation in FF). This could be fixed in the ThemeRoller. Or wait to be fixed within Firefox. If there is another explanation, I'd be interested to learn about it.

/* override jquery ui overlay style */
.ui-widget-overlay {
   background-image: none !important; /* FF fix */
   background: #000 url(images/new-ui-overlay.png) 50% 50% repeat-x;
}

[Scott González]

This only affects Firefox on OS X, not Windows, and goes all the way back to Firefox 7.

The suggested fix is not a fix as it prevents the use of background images.

I'm not sure that there's anything we can do about this. Here's my reduced test case: ​http://jsbin.com/imoceq/3/edit

[Scott González]

​https://bugzilla.mozilla.org/show_bug.cgi?id=800671

[kjauslin]

@scott: Thanks for reviewing and entering the bug in Bugzilla. You're right, the fix above does not really work. Let's see what the Firefox team will do about it.

[Scott González]

I'm closing this as can't fix, but I'm still monitoring the Firefox bug. If anyone finds a workaround, we can land it.

[Scott González]

4 years later and the Firefox bug was just closed as fixed :-)