Opened 7 years ago

Closed 7 years ago

Last modified 3 years ago

#8642 closed bug (cantfix)

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

Reported by: kjauslin Owned by:
Priority: minor Milestone: 1.9.1
Component: ui.dialog Version: 1.9.0
Keywords: Cc:
Blocked by: Blocking:

Description

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

Change History (8)

comment:1 Changed 7 years ago by kjauslin

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

comment:2 in reply to:  description Changed 7 years ago by 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;
}

comment:3 Changed 7 years ago by 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

comment:5 Changed 7 years ago by petersendidit

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

comment:6 in reply to:  3 Changed 7 years ago by 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.

comment:7 Changed 7 years ago by Scott González

Resolution: cantfix
Status: openclosed

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.

comment:8 Changed 3 years ago by Scott González

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

Note: See TracTickets for help on using tickets.