Bug 274595 – View Transition timing, performance and rendering quality with many shared elements (35+) is really bad

• Component: Animations
• Status: RESOLVED CONFIGURATION CHANGED

[Callie Riggins]

Created attachment 471482 [details]
Hosting view transition with many elements and timing offsets

When running a View Transition with many shared elements, especially with a lot of images; the current performance is really, really slow in comparison to Chrome. If you compare the uploaded video of Chrome vs Safari Nightly using Release 195 (Safari 17.4, WebKit 19619.1.15.0.1) you'll see quite a few issues popping up both performance and visually.

Repro Steps:
  - Log into airbnb.com on an account that has a host (can be a test listing / account)
  - Go to the Listings editor and click any room (my URL for example is https://www.airbnb.com/hosting/listings/editor/971111659926431856/details/photo-tour/326478170)
  - Compare the output to Chrome's (also attached to the video)

  - The Photo Tour in view-transition-group(main-panel-header) starts before the others, in Chrome it does not
  - The rendering of the photos makes me think it's not blending correctly with mix-blend-mode: plus-lighter on the individual images, compared to Chrome it's very blurry and buggy looking
  - The panel at timestamp 00:00:05 and between 00:00:06 seconds shows the animation jumping ahead and then back and then blending out, which isn't expected and appears to be a bug
  - Overall the performance here using linear-easing spring definitions is really poor, but Timeline recordings aren't calling out many things that just stand out. It's hard to inspect a ton as I don't see many animation tooling in Safari DevTools yet to really dig in during a View Transition.

This particular animation is pretty involved with 38 or so elements in 1 direction at least, but was presented at Google I/O's keynote as a stellar example of many View Transitions features.

[Callie Riggins]

Created attachment 471483 [details]
Chrome comparison of same flow

[Radar WebKit Bug Importer]

<rdar://problem/128664555>

[Tim Nguyen (:ntim)]

Thanks for reporting! Perf should be much better after bug 274437 and bug 274439. These fixes should come in the next 1 or 2 Safari technology previews.

[Antoine Quint]

Created attachment 471498 [details]
Behavior with 279263@main

Attached a screen recording of the behavior with a ToT build (279263@main)

[Alexey Proskuryakov]

Should we consider this resolved? To me, the recording looks good, although I'm not the best at judging animation smoothness.

[Callie Riggins]

Just tested with the latest build of Release 196 (Safari 17.4, WebKit 19619.1.16.3) that just got released and it's getting much better. The performance on the first invocation was a bit choppy but repeated ones I'm assuming when the image was cached in both directions was faster.

The main issue I see remaining is that on both the entry and exit animations some of the elements positioning during the animation is jumping dramatically. 

On the enter: The "Living Room" shared element jumps to the beginning, then jumps back to the right place, while the "Manage Photos" shared element that's a button has a scaling issue still.

On the exit: Much more pronounced here. Not sure if this is a layout issue but the entire grid of photos seems to be misaligned with the old/new captures. The old group scales down and out while the new comes in from the sources on the left, but the should all be connected. It creates a super strange distortion effect.

See attached video frame by frame to really see the crux of both sides.

[Callie Riggins]

Created attachment 471622 [details]
Enter / exit distortion, better perf for Build 196

[Tim Nguyen (:ntim)]

Created attachment 471640 [details]
Behavior as of 279857@main

Callie, can you help check if this recording looks OK to you?

I believe we fixed the issue as part of bug 274437 (which isn't part of STP 196).

Thanks for your help with testing and reporting!

[Callie Riggins]

Looks fantastic to me, no issues on our end now!

[Tim Nguyen (:ntim)]

Thanks, these fixes should arrive soon in Safari Technology Preview! Marking as "configuration changed" as other issues have fixed this.