RESOLVED FIXED 15158
Border radius + box shadow results in wrong anti-aliasing 
https://bugs.webkit.org/show_bug.cgi?id=15158
Summary Border radius + box shadow results in wrong anti-aliasing
Alexander Staubo
Reported 2007-09-07 16:53:13 PDT
When combining border radius and a box shadow, the rounded border is seemingly anti-aliased against black. See screenshot.
Attachments
Screenshot (3.85 KB, image/png)
2007-09-07 16:53 PDT, Alexander Staubo 		no flags
Details
Screenshot 2 (5.75 KB, image/png)
2007-09-07 16:56 PDT, Alexander Staubo 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Alexander Staubo
Comment 1 2007-09-07 16:53:48 PDT
Created attachment 16222 [details] Screenshot
Alexander Staubo
Comment 2 2007-09-07 16:54:40 PDT
The CSS, to reproduce: -webkit-border-radius: 18px; -webkit-box-shadow: 0px 0 20px rgba(0, 100, 255, 0.8);
Alexander Staubo
Comment 3 2007-09-07 16:56:10 PDT
Created attachment 16223 [details] Screenshot 2
Alexander Staubo
Comment 4 2007-09-07 16:56:45 PDT
More egregious in the second example: -webkit-border-radius: 18px; -webkit-box-shadow: 10px 10px 10px rgba(0, 100, 255, 0.8);
mitz
Comment 5 2007-09-08 02:59:02 PDT
By the nature of antialiasing, the black fill used to cast the drop shadow is showing through the antialiased clip that's supposed to cover it. There are similar issues with solid borders, e.g. <div style="width: 100px; height: 100px; -webkit-border-radius: 20px; border: 10px solid white; background: red;"></div> I think some common cases involving solid backgrounds/borders can be fixed and sped up. The cases reported here are more tricky because the background is transparent.
mitz
Comment 6 2008-08-04 21:39:29 PDT
These cases, but not the one mentioned in comment #5, were fixed in <http://trac.webkit.org/changeset/32660>.
Note You need to log in before you can comment on or make changes to this bug.