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
Product: WebKit
Classification: Unclassified
Component: New Bugs
: 528+ (Nightly build)
: Macintosh Intel Mac OS X 10.5
: P2 Normal
Assigned To: Simon Fraser (smfr)
: InRadar
Depends on:
Blocks: 51593
  Show dependency treegraph
 
Reported: 2008-10-22 18:12 PDT by Shawn Tice
Modified: 2011-04-19 22:26 PDT (History)
18 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Shawn Tice 2008-10-22 18:12:47 PDT
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 Shawn Tice 2008-10-22 18:14:17 PDT
Created attachment 24582 [details]
A demonstration of the problem.
Comment 2 Shawn Tice 2008-10-22 18:15:11 PDT
Created attachment 24583 [details]
The demonstration rendered in my build of WebKit.
Comment 3 mitz@webkit.org 2009-10-09 16:29:10 PDT
*** Bug 25586 has been marked as a duplicate of this bug. ***
Comment 4 James Dimick 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 James Dimick 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 David Kilzer (:ddkilzer) 2010-01-06 12:33:23 PST
<rdar://problem/7515374>
Comment 7 Anthony Ricaud 2010-05-19 16:10:41 PDT
*** Bug 39276 has been marked as a duplicate of this bug. ***
Comment 8 Dimitri Glazkov (Google) 2010-06-04 19:54:38 PDT
*** Bug 33621 has been marked as a duplicate of this bug. ***
Comment 9 Dimitri Glazkov (Google) 2010-06-04 19:58:18 PDT
*** Bug 34656 has been marked as a duplicate of this bug. ***
Comment 10 Simon Fraser (smfr) 2010-10-07 10:49:20 PDT
*** Bug 40509 has been marked as a duplicate of this bug. ***
Comment 11 Simon Fraser (smfr) 2011-04-19 19:34:24 PDT
Created attachment 90294 [details]
Patch
Comment 12 WebKit Review Bot 2011-04-19 19:58:43 PDT
Attachment 90294 [details] did not build on chromium:
Build output: http://queues.webkit.org/results/8471529
Comment 13 mitz@webkit.org 2011-04-19 20:02:03 PDT
Comment on attachment 90294 [details]
Patch

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 Simon Fraser (smfr) 2011-04-19 22:15:14 PDT
http://trac.webkit.org/changeset/84341
Comment 15 WebKit Review Bot 2011-04-19 22:26:27 PDT
http://trac.webkit.org/changeset/84341 might have broken Leopard Intel Release (Build) and Leopard Intel Debug (Build)