Re: [csswg-drafts] [css-backgrounds-4] `background-filter` (#4706)

Regarding filter() on images that have been stretched, I've been doing some testing on this (see

In Webkit and now our implementation, the filter is applied _after_ any stretching that occurs in `background-image`. I think this is almost certainly correct - for example:
div { background: filter(url(small-20x20.png), blur(5px)) left top / 200px 200px }
should give a 5px blur as specified by the user, not a 50px blur because the image has been scaled up by a factor of 10.

I suppose you could make this argument either way, but after a few days working with it this approach seems the right one. It makes resizing or substituting an image easier, and it means you can apply a consistent blur to `image-set`, for example, without having to worry about the resolution of the images. It's also much easier to apply to `border-image`, where scaling is less intuitive.

Either way, the approach has to be consistent for all cases where images can be specified as a `url()` _and_ have a size explicitly specified: `mask-image`, `border-image`, `mask-border` and `content` (did I miss any?). Webkit does this with `background-image` and `mask-image`, doesn't with `border-image` and doesn't yet support images as replaced content, apparently. No other browser support `filter()` yet.


Aside: although not strictly relevant to the original issue, an example we've been working on is at,output - testing `filter()` on `border-image` and `background-image`, as well as `initial-letters`. It largely works in Safari, although there are a few issues - note the much-less-than-specified blur on the frame, due to the filter being applied to the very high resolution image before scaling:

Here's how we render it:


Tomorrow's technology: bringing you the look of yesterday, today.

GitHub Notification of comment by faceless2
Please view or discuss this issue at using your GitHub account

Received on Wednesday, 13 May 2020 08:36:47 UTC