Bug 63952 - background clips incorrectly with border-radius rgba border and box-shadow
: background clips incorrectly with border-radius rgba border and box-shadow
Status: NEW
: WebKit
CSS
: 528+ (Nightly build)
: PC Windows 7
: P2 Normal
Assigned To:
:
: HasReduction, InRadar
:
:
  Show dependency treegraph
 
Reported: 2011-07-05 13:52 PST by
Modified: 2014-04-03 18:59 PST (History)


Attachments
Screenshots of css producing the bug in Firefox, Opera, IE, and Chrome (10.83 KB, image/jpeg)
2011-07-05 13:52 PST, Pam Griffith
no flags Details
Test case (559 bytes, text/html)
2011-07-05 13:52 PST, 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 PST, Nathan Hammond
no flags Details


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2011-07-05 13:52:12 PST
Created an attachment (id=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 From 2011-07-05 13:52:59 PST -------
Created an attachment (id=99741) [details]
Test case
------- Comment #2 From 2011-07-06 11:49:51 PST -------
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 From 2011-07-06 20:55:44 PST -------
*** Bug 53257 has been marked as a duplicate of this bug. ***
------- Comment #4 From 2011-07-06 21:15:06 PST -------
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 From 2011-07-07 09:44:20 PST -------
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 From 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 From 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 From 2013-01-08 13:27:30 PST -------
Created an attachment (id=181745) [details]
ToT screenshot (Safari, Retina display)
------- Comment #9 From 2013-01-08 14:54:29 PST -------
<rdar://problem/12976716>
------- Comment #10 From 2013-01-08 15:36:42 PST -------
This is possibly a duplicate of bug 106373.
------- Comment #11 From 2014-04-03 11:09:35 PST -------
Created an attachment (id=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 From 2014-04-03 11:11:49 PST -------
Also worth noting, the issue does not appear in Chrome either.
------- Comment #13 From 2014-04-03 18:59:39 PST -------
Might be related to bug 131204. I'll retest is after filters get subpixelished.