- From: Mike Bremford via GitHub <sysbot+gh@w3.org>
- Date: Wed, 13 May 2020 08:36:45 +0000
- To: public-css-archive@w3.org
Regarding filter() on images that have been stretched, I've been doing some testing on this (see https://github.com/web-platform-tests/wpt/pull/23429/files).
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:
```css
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.
<hr/>
Aside: although not strictly relevant to the original issue, an example we've been working on is at https://jsbin.com/xisohum/edit?css,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 https://github.com/w3c/csswg-drafts/issues/4706#issuecomment-627837755 using your GitHub account
Received on Wednesday, 13 May 2020 08:36:47 UTC