Bug 15158 - Border radius + box shadow results in wrong anti-aliasing
Summary: Border radius + box shadow results in wrong anti-aliasing
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2007-09-07 16:53 PDT by Alexander Staubo
Modified: 2008-08-04 21:39 PDT (History)
2 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Alexander Staubo 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.
Comment 1 Alexander Staubo 2007-09-07 16:53:48 PDT 
Created attachment 16222 [details]
Screenshot
Comment 2 Alexander Staubo 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);
Comment 3 Alexander Staubo 2007-09-07 16:56:10 PDT 
Created attachment 16223 [details]
Screenshot 2
Comment 4 Alexander Staubo 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);
Comment 5 mitz 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.
Comment 6 mitz 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>.