W3C home > Mailing lists > Public > www-style@w3.org > June 2010

Re: [css3-background] vastly different takes on "blur"

From: Simon Fraser <smfr@me.com>
Date: Fri, 18 Jun 2010 17:16:24 -0700
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, Brad Kemper <brad.kemper@gmail.com>, Brendan Kenny <bckenny@gmail.com>, fantasai <fantasai.lists@inkedblade.net>, "L. David Baron" <dbaron@dbaron.org>, Brian Manthos <brianman@microsoft.com>, "www-style@w3.org" <www-style@w3.org>
Message-id: <19338208-7CAC-4D50-A4F6-551CA9E27A2D@me.com>
To: robert@ocallahan.org
On Jun 14, 2010, at 6:00 PM, Robert O'Callahan wrote:

> On Tue, Jun 15, 2010 at 12:17 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> I have no opinion on the name, but the most intuitive thing for me is
> for the specified length to be the amount that the blur extends out of
> the native shadow box.
>  
> That's what we currently do, but not what the spec currently says. Currently the spec says the blur will extend out of the normal shadow box by half of the specified length.

We've investigated WebKit shadow blur radius. The behavior of the underlying graphics library (Core Graphics) is, amusingly, codified in the HTML5 canvas spec:
<http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#when-shadows-are-drawn>
but we think it's actually an implementation bug that we treat radii > 8px differently. 

Here's our intended rendering of a 100px x 100px box with "box-shadow: black 0 0 100px".
<http://smfr.org/misc/shadow.png>
Here, the effect of the shadow projects out from the element by the specified radius.

However, the spec currently states that the color transitions is the length of the blur distance, and that the color transition is centered on the shadow edge. This gives a color transition that is half the length of what WebKit's intended behavior is, and, for shadows with no offset or spread, means that the shadow will only project out by half of the blur radius.

So I would adjust the spec wording accordingly:
"A non-zero blur distance indicates that the resulting shadow should be blurred, such as by a Gaussian filter. The exact algorithm is not defined; however for a long, straight shadow edge, this should create a color transition that is twice the blur amount, perpendicular to and centered on the shadow's edge. The color transition ranges from the full shadow color at a distance equivalent to the blur amount inside the shadow edge to fully transparent by the same distance outside it."

Note that I think Firefox's rendering <http://www.bradclicks.com/cssplay/blur_100px_firefox.png> is incorrect, because it is not centering the blur on the shadow's edge. Also, this rendering looks different from what I get in Minefield 3.7a5pre on Mac; I suspect Mozilla might have some platform differences in shadow rendering.

Simon
Received on Saturday, 19 June 2010 00:17:01 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:28 GMT