Bug 279962 – [view-transitions] https://simple-set-demos.glitch.me/5-heading-text/ glitches

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Bramus]

Created attachment 472597 [details]
Screen Recording

There is a purple glitch when transitioning from page 1 to page 2 on the https://simple-set-demos.glitch.me/5-heading-text/ demo.

Tested in Safari 18 and Safari Technology Preview 203.

Expected behavior: no purple glitch to happen.

[Radar WebKit Bug Importer]

<rdar://problem/136324427>

[Tim Nguyen (:ntim)]

Created attachment 472614 [details]
Single page testcase

[Tim Nguyen (:ntim)]

Interestingly this doesn't reproduce in mini browser, I suspect this is Safari specific, potentially related to the Safari header coloring.

[Tim Nguyen (:ntim)]

Yeah, if you disable header coloring in Safari settings, you instead see the window backdrop flash behind.

[Tim Nguyen (:ntim)]

Wait, I think the purple flash from the original testcase is actually a different issue... Needs more investigation

[Bramus]

Got another report on this: https://mastodon.social/@pepelsbey/113242367779018797

> I opened my website in Safari TP, and it was blinking weirdly during the transition. Not very usable, I’d say. […] There’s no green background anywhere in styles. It seems like it comes from the hero picture.

[Bramus]

Dug a bit deeper an it’s definitely the color used in the Compact Tabs Mode that is causing this. I didn’t immediatley catch this, as I have Safari set to Separate Tabs Mode.

[Bramus]

Created attachment 472783 [details]
Screenshot of https://simple-set-demos.glitch.me/5-heading-text/ with Safari in Compact Tabs Mode. It’s the purple used in Safari’s tab bar that flashed in between VTs.

[Bramus]

Created attachment 472784 [details]
Screenshot of https://pepelsbey.dev/ with Safari in Compact Tabs Mode. It’s the green used in Safari’s tab bar that flashed in between VTs.

[Tim Nguyen (:ntim)]

Maybe something to consider is to return true here: `RenderView::shouldPaintBaseBackground` when a view transition is running, or to paint a white background behind all snapshots.

[Matt Woodrow]

(In reply to Tim Nguyen (:ntim) from comment #10)
> Maybe something to consider is to return true here:
> `RenderView::shouldPaintBaseBackground` when a view transition is running,
> or to paint a white background behind all snapshots.

What about in dark mode?

If I'm reading it correctly, the test is fading out the old snapshot entirely, before fading in the new snapshot.

That leaves a period where users can see what's behind the snapshots, which I believe should be the 'canvas surface' - https://www.w3.org/TR/css-backgrounds-3/#canvas-surface.

That's typically white, but the spec explicitly clarifies that it doesn't need to be, and indeed is not in Safari at times.

Possibly we should force it back to white while a view transition is animating, but it's not obvious that authors should be relying on this (without spec additions).

[Matt Woodrow]

I filed a spec issue to try clarify the intended behaviour here - https://github.com/w3c/csswg-drafts/issues/11083

[Matt Woodrow]

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

[EWS]

Committed 285812@main (c3c287eed0e5): <https://commits.webkit.org/285812@main>

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

[EWS]

Committed 283286.405@safari-7620-branch (3e0472e18604): <https://commits.webkit.org/283286.405@safari-7620-branch>

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