W3C home > Mailing lists > Public > public-fx@w3.org > July to September 2013

Re: [filter-effects] blur() on background-image and edge blurring

From: Rik Cabanier <cabanier@gmail.com>
Date: Sun, 25 Aug 2013 16:24:00 -0700
Message-ID: <CAGN7qDCwNZAK-OU4DA1dahb+A2K9Z9za3bAeFCrfp=OsQVzdPQ@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: Dirk Schulze <dschulze@adobe.com>, "public-fx@w3.org" <public-fx@w3.org>
Yes, this seems reasonable for blurring images. You are not proposing this
for the CSS filter shorthand, right?
Can you post a jsfiddle and a screen shot to make sure that we're all on
the same page?

On Sun, Aug 25, 2013 at 9:57 AM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> On Sun, Aug 25, 2013 at 5:02 AM, Dirk Schulze <dschulze@adobe.com> wrote:
> > Hi,
> >
> > Experimenting with the CSS Image filter() function support in WebKit, I
> noticed a problem with blur(). Just as a summary to filter(). The function
> lets you filter its input before it is used as e.g a background image:
> >
> >         background-image: filter(url(image.png), blur(10px));
> >
> > When you try the example above then you'll see a blurred image. Since
> the gaussian kernel goes over each pixel in the image, there are naturally
> undefined pixels that are outside of image.png. In this case the
> specification requires taking transparent black pixels, making the edges
> fading transparent. This is not necessarily wanted and produces ugly
> results because of the clipping to the image boundaries. You just see the
> half of the blurring, the rest gets clipped away.
> >
> > I suggest adding the attribute "edgeMode" from feConvolveMatrix[1] to
> the feGaussianBlur element. The initial value would be 'none'. The current
> behavior would be preserved.
> > For the CSS Image filter() function and blur(), the value would be
> 'duplicate'. This duplicates the pixels on the nearest edge (separated by
> horizontal and vertical direction) to fill the value for the sliding kernel
> matrix of the gaussian blur algorithm.
> >
> > 'Wrap', which takes the pixel color values of the opposite side, can
> produce reasonable results too. But just if you have a repeating image and
> unless you do not use properties like 'background-repeat: space' where you
> have spacing between single image tiles and the wrapping will look ugly.
> >
> > I don't think that we need to extend blur() with the  edgeMode keywords
> at the this point. If a different behavior is wanted, the user can switch
> to the SVG Filter alternative. But we have the possibility to do so later.
> This sounds reasonable, and I agree that "duplicate" is the best
> default for the CSS functions.  I'm fine with not allowing
> customization of it for now, as it's trivial to add later if we feel
> like it.
> ~TJ
Received on Sunday, 25 August 2013 23:24:27 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:49:46 UTC