W3C home > Mailing lists > Public > public-css-archive@w3.org > May 2020

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

From: Mike Bremford via GitHub <sysbot+gh@w3.org>
Date: Wed, 13 May 2020 08:36:45 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-627837755-1589359004-sysbot+gh@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:
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 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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:06 UTC