Bug 21819

Summary: background color of elements with border-radius shows around outer edge of border at corners
Product: WebKit Reporter: Shawn Tice <sctice>
Component: New BugsAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED FIXED    
Severity: Normal CC: abarth, bdakin, bryan, dglazkov, donotknow, eric, glen.84, i_have, Justin, mail, mark.farina, markg85, mitz, octavez, rik, simon.fraser, webkit, webkit.review.bot
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Mac (Intel)   
OS: OS X 10.5   
Bug Depends on:    
Bug Blocks: 51593    
Attachments:
Description Flags
A demonstration of the problem.
none
The demonstration rendered in my build of WebKit.
none
Patch mitz: review+

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 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 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)