Bug 63952 - background clips incorrectly with border-radius rgba border and box-shadow
Summary: background clips incorrectly with border-radius rgba border and box-shadow
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows 7
: P2 Normal
Assignee: zalan
URL:
Keywords: HasReduction, InRadar
Depends on:
Blocks:
 
Reported: 2011-07-05 13:52 PDT by Pam Griffith
Modified: 2015-07-28 18:22 PDT (History)
13 users (show)

See Also:


Attachments
Screenshots of css producing the bug in Firefox, Opera, IE, and Chrome (10.83 KB, image/jpeg)
2011-07-05 13:52 PDT, Pam Griffith
no flags Details
Test case (559 bytes, text/html)
2011-07-05 13:52 PDT, Pam Griffith
no flags Details
ToT screenshot (Safari, Retina display) (7.79 KB, image/png)
2013-01-08 13:27 PST, Alexey Proskuryakov
no flags Details
Test Page Zoomed (24.69 KB, image/png)
2014-04-03 11:09 PDT, Nathan Hammond
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Pam Griffith 2011-07-05 13:52:12 PDT
Created attachment 99740 [details]
Screenshots of css producing the bug in Firefox, Opera, IE, and Chrome

With border-radius and -webkit-background-clip:padding-box, the background should clip on the inside of the rounded corner. However, when I use a semi-transparent color (with rgba) for the border and add a box-shadow, I can see the box background beneath the corner. It behaves correctly in Firefox, Opera, and IE9 (screenshot attached), but incorrectly in Chrome 14.0.803.0 dev-m and Safari 5.0.5.
Comment 1 Pam Griffith 2011-07-05 13:52:59 PDT
Created attachment 99741 [details]
Test case
Comment 2 Alexey Proskuryakov 2011-07-06 11:49:51 PDT
I wonder how many of these are full dupes: bug 62639, bug 61587, bug 53257, bug 50072, bug 38787, bug 32793, bug 23166...
Comment 3 Alice Boxhall 2011-07-06 20:55:44 PDT
*** Bug 53257 has been marked as a duplicate of this bug. ***
Comment 4 Alice Boxhall 2011-07-06 21:15:06 PDT
I don't think any of those are full duplicates (I did think Bug 53257 was but now I don't think so).

Confirmed on Chrome 14.0.803.0 dev, and WebKit nightly Version 5.0.5 (6533.21.1, r90503).
Comment 5 Pam Griffith 2011-07-07 09:44:20 PDT
It's possible that this is 2 bugs. I think the outer box-shadow may also be drawn under the rgba border all the way around in webkit and not in other browsers.
Comment 6 Nathan Hammond 2013-01-08 13:10:58 PST
This issue does not appear in the WebKit nightlies. I recommend it for closing.

As a (dirty) workaround for just the background-clip: padding-box; problem for released versions of WebKit, here is some CSS.

ul { border: 1px solid rgba(0,0,0,.3); border-radius: 8px; position: relative; list-style: none; }
ul::before { content: ''; display: block; width: 100%; height: 100%; border-radius: 7px; background: red; position: absolute; z-index: 0; }
li { position: relative; }

Please wash your hands after use.
Comment 7 Alexey Proskuryakov 2013-01-08 13:26:13 PST
The progression happened in <http://trac.webkit.org/r131402>. The test case doesn't look quite good yet though (on a Retina MBP), as there is some badness in top right and bottom right corners. Perhaps that's a separate bug.

> I wonder how many of these are full dupes: bug 62639, bug 61587, bug 53257, bug 50072, bug 38787, bug 32793, bug 23166...

Will need to re-check these too.
Comment 8 Alexey Proskuryakov 2013-01-08 13:27:30 PST
Created attachment 181745 [details]
ToT screenshot (Safari, Retina display)
Comment 9 Radar WebKit Bug Importer 2013-01-08 14:54:29 PST
<rdar://problem/12976716>
Comment 10 Justin Novosad 2013-01-08 15:36:42 PST
This is possibly a duplicate of bug 106373.
Comment 11 Nathan Hammond 2014-04-03 11:09:35 PDT
Created attachment 228523 [details]
Test Page Zoomed

This is a screen capture of the test page rendered incorrectly at full zoom. You can clearly see what appear to be rounding errors. This does not occur in Firefox.
Comment 12 Nathan Hammond 2014-04-03 11:11:49 PDT
Also worth noting, the issue does not appear in Chrome either.
Comment 13 zalan 2014-04-03 18:59:39 PDT
Might be related to bug 131204. I'll retest is after filters get subpixelished.
Comment 14 zalan 2015-07-28 18:22:48 PDT
I can't repro this with r187532.