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

See Also:

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

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