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

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.

Greetings,
Dirk

[1] http://dev.w3.org/fxtf/filters/#feConvolveMatrixElementEdgeModeAttribute

Received on Sunday, 25 August 2013 12:03:18 UTC