Bug 21819 - background color of elements with border-radius shows around outer edge of border at corners
: background color of elements with border-radius shows around outer edge of bo...
Status: RESOLVED FIXED
: WebKit
New Bugs
: 528+ (Nightly build)
: Macintosh Intel Mac OS X 10.5
: P2 Normal
Assigned To:
:
: InRadar
:
: 51593
  Show dependency treegraph
 
Reported: 2008-10-22 18:12 PST by
Modified: 2011-04-19 22:26 PST (History)


Attachments
A demonstration of the problem. (741 bytes, text/html)
2008-10-22 18:14 PST, Shawn Tice
no flags Details
The demonstration rendered in my build of WebKit. (43.63 KB, image/png)
2008-10-22 18:15 PST, Shawn Tice
no flags Details
Patch (1.28 MB, patch)
2011-04-19 19:34 PST, Simon Fraser (smfr)
mitz: review+
Review Patch | Details | Formatted Diff | Diff


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2008-10-22 18:12:47 PST
The background color of an element with -webkit-border-radius set, and with a border whose color differs from the element's background, shows through at the outer edges of the rounded corners. A 1-pixel line in the color of the element's background shows around the outer edges of each of the rounded corners. The line is always there when there is a border and background color, but some color combinations make it more or less obvious.

I'll include a simplified test case and image to help clarify the issue.
------- Comment #1 From 2008-10-22 18:14:17 PST -------
Created an attachment (id=24582) [details]
A demonstration of the problem.
------- Comment #2 From 2008-10-22 18:15:11 PST -------
Created an attachment (id=24583) [details]
The demonstration rendered in my build of WebKit.
------- Comment #3 From 2009-10-09 16:29:10 PST -------
*** Bug 25586 has been marked as a duplicate of this bug. ***
------- Comment #4 From 2009-12-11 22:33:40 PST -------
I can confirm this bug with the latest WebKit nightly on Windows 7.

I actually noticed this bug on my own while working on a recent project. I'm glad this bug has already been submitted. Saves me time. :P
------- Comment #5 From 2009-12-12 02:00:48 PST -------
I was just noticing that Firefox seems to have the inverse or this issue. In some circumstances you can see a very tiny gap between the background of an element and the inside of the border.
------- Comment #6 From 2010-01-06 12:33:23 PST -------
<rdar://problem/7515374>
------- Comment #7 From 2010-05-19 16:10:41 PST -------
*** Bug 39276 has been marked as a duplicate of this bug. ***
------- Comment #8 From 2010-06-04 19:54:38 PST -------
*** Bug 33621 has been marked as a duplicate of this bug. ***
------- Comment #9 From 2010-06-04 19:58:18 PST -------
*** Bug 34656 has been marked as a duplicate of this bug. ***
------- Comment #10 From 2010-10-07 10:49:20 PST -------
*** Bug 40509 has been marked as a duplicate of this bug. ***
------- Comment #11 From 2011-04-19 19:34:24 PST -------
Created an attachment (id=90294) [details]
Patch
------- Comment #12 From 2011-04-19 19:58:43 PST -------
Attachment 90294 [details] did not build on chromium:
Build output: http://queues.webkit.org/results/8471529
------- Comment #13 From 2011-04-19 20:02:03 PST -------
(From update of attachment 90294 [details])
View in context: https://bugs.webkit.org/attachment.cgi?id=90294&action=review

> Source/WebCore/ChangeLog:12
> +        If the border is opaque on all sides, we can inset the border by

I think you mean “inset the background”

> Source/WebCore/ChangeLog:35
> +        Helper method to determine if this border side will totally
> +        the border edge, allowing us to inset it.

You totally a word

> Source/WebCore/rendering/RenderBoxModelObject.cpp:622
> +                roundedBorder.inflate(-1);

Does this do the right thing for 1-by-n and 2-by-n borderRects?

> Source/WebCore/rendering/RenderBoxModelObject.cpp:1091
> +        if (!isPresent || isTransparent || width < 2 || color.hasAlpha() || style == BHIDDEN)
> +            return false;
> +
> +        if (style == DOTTED || style == DASHED)
> +            return false;
> +
> +        if (style == DOUBLE)
> +            return width >= 5; // The outer band needs to be >= 2px wide.

These comparisons should be in device (well, painting root) space, not user space. For example, if you have a plain .5 scale transform, the width needs to be at least 4, etc. Worth a comment, perhaps.

> Source/WebCore/rendering/RenderBoxModelObject.cpp:2079
> +    edges[BSTop] = BorderEdge(style->borderTopWidth(),
> +                    style->visitedDependentColor(CSSPropertyBorderTopColor),
> +                    style->borderTopStyle(),
> +                    style->borderTopIsTransparent(),
> +                    horizontal || includeLogicalLeftEdge);
> +
> +    edges[BSRight] = BorderEdge(style->borderRightWidth(),
> +                    style->visitedDependentColor(CSSPropertyBorderRightColor),
> +                    style->borderRightStyle(),
> +                    style->borderRightIsTransparent(),
> +                    !horizontal || includeLogicalRightEdge);
> +
> +    edges[BSBottom] = BorderEdge(style->borderBottomWidth(),
> +                    style->visitedDependentColor(CSSPropertyBorderBottomColor),
> +                    style->borderBottomStyle(),
> +                    style->borderBottomIsTransparent(),
> +                    horizontal || includeLogicalRightEdge);
> +
> +    edges[BSLeft] = BorderEdge(style->borderLeftWidth(),
> +                    style->visitedDependentColor(CSSPropertyBorderLeftColor),
> +                    style->borderLeftStyle(),
> +                    style->borderLeftIsTransparent(),
> +                    !horizontal || includeLogicalLeftEdge);

Questionable alignment.
------- Comment #14 From 2011-04-19 22:15:14 PST -------
http://trac.webkit.org/changeset/84341
------- Comment #15 From 2011-04-19 22:26:27 PST -------
http://trac.webkit.org/changeset/84341 might have broken Leopard Intel Release (Build) and Leopard Intel Debug (Build)