Closed Bug 416124 Opened 17 years ago Closed 12 years ago

Background paint with -moz-border-colors leaks through the 'transparent' lines.

Categories

(Core :: Layout, defect)

defect
Not set
normal

Tracking

()

RESOLVED FIXED

People

(Reporter: alfredkayser, Unassigned)

Details

Attachments

(4 files)

With -moz-border-colors, one can have (semi)transparent lines in the border, like: border: 5px solid; -moz-border-top-colors: transparent transparent blue red; -moz-border-left-colors: transparent transparent blue red; -moz-border-right-colors: transparent transparent blue red; -moz-border-bottom-colors: transparent transparent blue red; It is unclear what should then happen with the background painting for those lines. Shrinking the background clip area to exclude the border would solve above case. But not the below case: -moz-border-top-colors: blue red transparent transparent; Even more, what needs to happen with this: -moz-border-top-colors: blue transparent transparent red;
Note this is for both 'background-color' as for 'background-image'. The first is simple to fix (I have a patch), but the second requires more thinking, as what needs to happen with the Anchorpoint when we shrink the background area?
Attached image screenshot (SeaMonkey trunk) (deleted) —
Mozilla/5.0 (Windows; U; Windows NT 5.0; rv:1.9b4pre) Gecko/2008020702 SeaMonkey/2.0a1pre SeaMonkey trunk maybe regression from Bug 359568
This is not an 'regression'. See bug 374156. According to w3c specifications the background image and color need to also be drawn in the area covered by the border, even if the border is 'transparent'. What happens in this 'seamonkey' theme is that the outer two lines of the border are made transparent. A better solution is to increase the margin and decrease the border width to achieve the same effect. This is what I have done in my themes. Or to use 'outline' for that 'hover' (or 'focus') effect. So, the fix needs to be in the theme code to correctly use border-width, margins and outline. Two options here: * DUP this bug to bug 374156 (about the 'transparant' effect of borders) * rename this bug to address the hover/focus of these buttons themselves.
Attached file Testcase (not transparent border) (deleted) —
Background paint leaks when border used radius.
This is a slightly different issue: The 'anti-aliasing' of the background drawing and then the border drawing causes to 'leak' some of the anti-aliasing of the background outside the border.
Bug 374156 explicitly says that it's _not_ completely clear from the W3C specs what a "transparent" border means. In any case, we redefine the meaning and functionality of -moz-border-*-colors, which is no W3C property and which is heavily used by themers - this is no good idea.
The problem is that for background-image the whole border area, also for -moz-border-*-colors is filled, but for background-color is used to shrink the bgClipArea to allow the moz-border-*-colors to be "transparent". The patch I can prepare a patch to make moz-border-*-color support this kind of "transparency" again, but I think if we do this, this should also be done for background-image. And what if not the outer lines of the border are transparent, but only the inner lines? These things make all this very complex, and the simplest and best thing to do is to keep the -moz-border-*-colors in line with w3c, even if -colors is not in w3c (yet). There are other ways to get the outer lines of the border transparent: just use margin instead of overlarge borders (and then making them transparant).
Attachment #301895 - Attachment mime type: text/plain → text/html
Firefox 4.0 and later has the solution: background-clip:padding-box;
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: