| Summary: | background clips incorrectly with border-radius rgba border and box-shadow | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Pam Griffith <pamgriffith> | ||||||||||
| Component: | CSS | Assignee: | zalan <zalan> | ||||||||||
| Status: | RESOLVED WORKSFORME | ||||||||||||
| Severity: | Normal | CC: | aboxhall, ap, bugs.webkit.org, dstockwell, esprehn, junov, mitz, rob.lifford+webkitbugzilla, simon.fraser, thorton, webkit-bug-importer, zackw, zalan | ||||||||||
| Priority: | P2 | Keywords: | HasReduction, InRadar | ||||||||||
| Version: | 528+ (Nightly build) | ||||||||||||
| Hardware: | PC | ||||||||||||
| OS: | Windows 7 | ||||||||||||
| Attachments: |
|
||||||||||||
Created attachment 99741 [details]
Test case
I wonder how many of these are full dupes: bug 62639, bug 61587, bug 53257, bug 50072, bug 38787, bug 32793, bug 23166... *** Bug 53257 has been marked as a duplicate of this bug. *** 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). 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. 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.
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. Created attachment 181745 [details]
ToT screenshot (Safari, Retina display)
This is possibly a duplicate of bug 106373. 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.
Also worth noting, the issue does not appear in Chrome either. Might be related to bug 131204. I'll retest is after filters get subpixelished. I can't repro this with r187532. |
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.