Bug 63952 – background clips incorrectly with border-radius rgba border and box-shadow

• Status: RESOLVED
• Resolution: WORKSFORME
• Component: CSS

[Pam Griffith]

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.

[Pam Griffith]

Created attachment 99741 [details]
Test case

[Alexey Proskuryakov]

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

[Alice Boxhall]

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

[Alice Boxhall]

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

[Pam Griffith]

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.

[Nathan Hammond]

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.

[Alexey Proskuryakov]

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.

[Alexey Proskuryakov]

Created attachment 181745 [details]
ToT screenshot (Safari, Retina display)

[Radar WebKit Bug Importer]

<rdar://problem/12976716>

[Justin Novosad]

This is possibly a duplicate of bug 106373.

[Nathan Hammond]

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.

[Nathan Hammond]

Also worth noting, the issue does not appear in Chrome either.

[zalan]

Might be related to bug 131204. I'll retest is after filters get subpixelished.

[zalan]

I can't repro this with r187532.