View Transitions: Fixes Astro's fade animation to prevent flicker during morph transitions

[martrapp]

Changes

Adds mix-blend-mode: plus-lighter to Astro's fade transitions
Fixes #12045

Testing

manually tested

Docs

n.a. / bug fix

[changeset-bot]

🦋 Changeset detected

Latest commit: 780db2d

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[martrapp]

I tried hard to extend the generic solution in runtime/server/transition.ts with another dimension for CSS pseudo-classes or at least a hard-coded :only-child, in a way that is widely compatible with what we had before. And failed.

I have then buried my original doubts whether it might be a bad idea to set the mix-blend-mode for image-pairs with a single image, too.

Adding the mix-blend-mode to the @keyframes works without much bloat and has the desired effect, although it is now also set for image pairs with only one child.