[Webkit-unassigned] [Bug 274595] New: View Transition timing, performance and rendering quality with many shared elements (35+) is really bad

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=274595

            Bug ID: 274595
           Summary: View Transition timing, performance and rendering
                    quality with many shared elements (35+) is really bad
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Mac (Apple Silicon)
                OS: macOS 14
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: callie.riggins at airbnb.com
                CC: graouts at apple.com

Created attachment 471482

  --> https://bugs.webkit.org/attachment.cgi?id=471482&action=review

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240523/676c74e3/attachment-0001.htm>