Bug 21819 – background color of elements with border-radius shows around outer edge of border at corners

• Component: New Bugs
• Status: RESOLVED FIXED

[Shawn Tice]

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.

[Shawn Tice]

Created attachment 24582 [details]
A demonstration of the problem.

[Shawn Tice]

Created attachment 24583 [details]
The demonstration rendered in my build of WebKit.

*** Bug 25586 has been marked as a duplicate of this bug. ***

[James Dimick]

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

[James Dimick]

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.

[David Kilzer (:ddkilzer)]

<rdar://problem/7515374>

[Anthony Ricaud]

*** Bug 39276 has been marked as a duplicate of this bug. ***

[Dimitri Glazkov (Google)]

*** Bug 33621 has been marked as a duplicate of this bug. ***

[Dimitri Glazkov (Google)]

*** Bug 34656 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

*** Bug 40509 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

Created attachment 90294 [details]
Patch

[WebKit Review Bot]

Attachment 90294 [details] did not build on chromium:
Build output: http://queues.webkit.org/results/8471529

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.

[Simon Fraser (smfr)]

http://trac.webkit.org/changeset/84341

[WebKit Review Bot]

http://trac.webkit.org/changeset/84341 might have broken Leopard Intel Release (Build) and Leopard Intel Debug (Build)