Bug 293903
| Summary: | An image with a filter and mix-blend-mode doesn't get mixed, only filtered | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Christopher Kirk-Nielsen <chriskirknielsen+wkbugs> |
| Component: | Images | Assignee: | Matt Woodrow <mattwoodrow> |
| Status: | RESOLVED FIXED | ||
| Severity: | Normal | CC: | sabouhallawa, simon.fraser, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 18 | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | macOS 14 | ||
| See Also: | https://github.com/web-platform-tests/wpt/pull/53497 | ||
Christopher Kirk-Nielsen
If you apply a filter, like `filter: grayscale()` to an image, and a blend mode, like `mix-blend-mode: screen`, the image is only getting the filter applied, and the blend mode is ignored. In the demo below, it is absolutely positioned to cover the viewport on a green background.
Expected: the image's blend mode gets applied
Actual: blend mode is ignored
Demo: https://codepen.io/chriskirknielsen/pen/ByNKExW?editors=1100
Potentially related: https://bugs.webkit.org/show_bug.cgi?id=169916
Safari version: 18.1.1 (stable)
macOS version: 14.7.1
Safari: FAIL
Chrome: OK
Firefox: OK
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/152460888>
Matt Woodrow
Pull request: https://github.com/WebKit/WebKit/pull/47216
EWS
Committed 296827@main (1e13b3de61a0): <https://commits.webkit.org/296827@main>
Reviewed commits have been landed. Closing PR #47216 and removing active labels.
Matt Woodrow
https://github.com/web-platform-tests/wpt/pull/53497