Bug 304981 – CSS View Transitions causes rendering issues with non-srgb colors.

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Roman Czerkies]

When using CSS View Transitions with:

```css
@view-transition {
    navigation: auto;
}
```

Safari shows incorrect rendering during the crossfade phase, especially on page load or reload.
Some visual calculations appear to be applied late, after the transition has already started.


- Scroll-driven animations
Scroll-driven animations combined with Container Query–based styles render late on reload, causing visible jumps during the crossfade.

Reproduction page: https://issues.romanczerki.es/view-transitions/scroll-driven.html


- Alpha transparency
Elements using alpha colors (rgba(), oklch() / alpha) briefly render incorrectly during the crossfade, then snap to the correct value when reloading the page.

Reproduction page: https://issues.romanczerki.es/view-transitions/alpha.html

[Simon Fraser (smfr)]

What am I looking for on https://issues.romanczerki.es/view-transitions/scroll-driven.html? Does the repro involve clicking the buttons, or just reloading the page?

[Radar WebKit Bug Importer]

<rdar://problem/167634138>

[Roman Czerkies]

(In reply to Simon Fraser (smfr) from comment #1)
> What am I looking for on
> https://issues.romanczerki.es/view-transitions/scroll-driven.html? Does the
> repro involve clicking the buttons, or just reloading the page?

Sorry for the lack of explanation in the initial report!
To reproduce the issue, you need to click the first "Reload the page" link on the page. This triggers a navigation, activating `@view-transition { navigation: auto }`.
The rendering of alpha-transparent elements and scroll-driven animations may appear incorrect during / after the crossfade.

[Simon Fraser (smfr)]

Maybe the snapshots are SRGB?

[Roman Czerkies]

(In reply to Simon Fraser (smfr) from comment #4)
> Maybe the snapshots are SRGB?

Is that a question for me?
I guess it's not only a color problem, regard of the "jump" in CSS View Transitions detection at reload (https://issues.romanczerki.es/view-transitions/scroll-driven.html)

[Matt Woodrow]

This is bit confusing, since there's two separate issues here.

The scroll driven animations issue has already been fixed, in bug 307782.

Changing the title of this bug to just reflect the remaining issue, drawing is incorrect with colors outside of the sRGB gamut.

[Matt Woodrow]

Pull request: https://github.com/WebKit/WebKit/pull/61301

[Matt Woodrow]

Pull request: https://github.com/WebKit/WebKit/pull/61370

[EWS]

Committed 310012@main (8198a35ec20a): <https://commits.webkit.org/310012@main>

Reviewed commits have been landed. Closing PR #61370 and removing active labels.

[Roman Czerkies]

(In reply to Matt Woodrow from comment #6)
> This is bit confusing, since there's two separate issues here.
> 
> The scroll driven animations issue has already been fixed, in bug 307782.
> 
> Changing the title of this bug to just reflect the remaining issue, drawing
> is incorrect with colors outside of the sRGB gamut.

Thanks for the fix and for clarifying the scope of the issues, much appreciated.