|Summary:||background color of elements with border-radius shows around outer edge of border at corners|
|Product:||WebKit||Reporter:||Shawn Tice <sctice>|
|Component:||New Bugs||Assignee:||Simon Fraser (smfr) <simon.fraser>|
|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|
|Version:||528+ (Nightly build)|
|OS:||OS X 10.5|
|Bug Depends on:|
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 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 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.