Crossfade opacity is incorrect

[Rich-Harris]

Describe the bug

When using crossfade to transition between two elements, the in element goes from 0 to o (where o is the natural opacity) while the out element goes from o to 0.

The result is that at the midpoint, the combined opacity is less than either element's natural opacity. In the common case where both elements have a natural opacity of 1, the combined opacity at the midpoint is 1 - 0.5^2 = 0.75.

This can be solved with a quadratic blending formula with special handling for the common case (which is complicated by the need to know which element is on top of the other).

Reproduction

https://svelte.dev/repl/6dc637d0321f41f983da99907b2f451d?version=3.42.1

This also showcases a separate bug, which is a dupe of #4389. (There are several open crossfade issues; the whole thing probably needs a bit of a cleanup.)

Logs

No response

System Info

Svelte 3.42.1

Severity

annoyance

[Rich-Harris]

(one fairly major wrinkle that was just pointed out to me — maintaining full opacity for the bottom element doesn't really work if the top element's non-opaque areas don't correspond exactly with the bottom element. So this only really works for rectangles)

[vicky1999]

Hi, I would like to work on this issue. can I try?

[VincentSastra]

Hi, I'm currently trying to work on this issue. So far I've made it work for most cases except when the opacity is 1. For this case, I need to determine which element is on 'top' and I'm unsure if I can install the stacking-order library for this.

[jessecoleman]

Hey, just wondering if there's any progress on this issue, and if not could I contribute to getting this over the finish line? I'm developing a game in the svelte framework and use the crossfade effect for a pretty prominent UI transition.

[Azarattum]

Check out mix-blend-mode: plus-lighter. It seems to have been created exactly for this purpose. Support isn't that awful either. It might be a progressive enhancement anyway. The problem is we need a way to tell it which elements we should and shouldn't blend. I tried playing around with isolation property, but no luck so far...

Try it out in REPL. (Only works for the white rectangle)

[Azarattum]

We really need this to be solved along with the other crossfade bugs to be able to use crossfade for anything serious like page transitions. Ideally we want it to be able to do something like the page transition API crossfades between pages in svelte's native router.

[ww-wolt]

Are there any updates on this issue? There is a lot of useful information in this stackoverflow post.
Although not perfect, changing the crossfade opacity function to an exponential function (as explained in the stackoverflow answer) would already bring a lot of improvement.
And mix-blend-mode: plus-lighter already has over 90% browser support. Using it in combination with the css isolation property as nicely explained in this video would be a great option.