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

On Aug 26, 2013, at 1:24 AM, Rik Cabanier <cabanier@gmail.com> wrote:

> Yes, this seems reasonable for blurring images. You are not proposing this for the CSS filter shorthand, right?

edgeMode would be set to "duplicate" for the blur() function on CSS Images:

	background-image: filter(url(image.png), blur(10px));

edgeMode would be set to "none" for the blur() function on the 'filter' property:

	filter: blur(10px);

Greetings,
Dirk



> 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 Monday, 26 August 2013 12:45:50 UTC