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

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

> On Sun, Aug 25, 2013 at 5:02 AM, Dirk Schulze <> 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