Bug 15158

Summary:

Border radius + box shadow results in wrong anti-aliasing

Product:

WebKit

Reporter:

Alexander Staubo <alex>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

dev+webkit, mitz

Priority:

Version:

528+ (Nightly build)

Hardware:

All

OS:

All

Attachments:

Description	Flags
Screenshot	none
Screenshot 2	none

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