- From: Jake Archibald via GitHub <sysbot+gh@w3.org>
- Date: Thu, 13 Jan 2022 12:54:11 +0000
- To: public-fxtf-archive@w3.org
@cabanier https://static-misc-3.glitch.me/composite-test/mix-blend-mode-dom.html - here's a demo using only DOM elements. Of course, the cross-fade is likely to be an animation triggered by a click, but the slider used on this page makes it easier to see the difference between the default compositing method (source-over) and `plus-lighter`. Summary of material relating to this: - [Blog post with demos](https://jakearchibald.com/2021/dom-cross-fade/) detailing the problem, and how `plus-lighter` solves it. - [A video](https://www.youtube.com/watch?v=PYSOnC2CrD8) covering the issue, with animated examples and explanation. - [More demos](https://static-misc-3.glitch.me/composite-test/2.html) showing how various techniques work in canvas, including "lighter" which achieves a good cross-fade - [Demo of mix-blend mode](https://static-misc-3.glitch.me/composite-test/mix-blend-mode.html) using plus-lighter on two DOM nodes (`<svg>` in this case), which highlights [a couple of WebKit bugs](https://bugs.webkit.org/show_bug.cgi?id=235106). - [As above but using two `<div>`s rather than `<svg>`](https://static-misc-3.glitch.me/composite-test/mix-blend-mode-dom.html) - [Web platform tests](https://github.com/web-platform-tests/wpt/pull/31757) which show the feature behaving as expected. -- GitHub Notification of comment by jakearchibald Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/pull/444#issuecomment-1012110487 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 13 January 2022 12:54:12 UTC