Bug 272556 - [view-transitions] Final position not calculated correctly when applied to view-transition element
Summary: [view-transitions] Final position not calculated correctly when applied to vi...
Status: RESOLVED DUPLICATE of bug 272130
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Apple Silicon) macOS 14
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2024-04-11 14:21 PDT by Callie Riggins
Modified: 2024-04-11 23:14 PDT (History)
4 users (show)

See Also:


Attachments
Safari Technology Preview of incorrect final position (586.40 KB, video/quicktime)
2024-04-11 14:21 PDT, Callie Riggins
no flags Details
Chrome's rendering for comparison (560.55 KB, video/quicktime)
2024-04-11 14:22 PDT, Callie Riggins
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Callie Riggins 2024-04-11 14:21:31 PDT
Created attachment 470872 [details]
Safari Technology Preview of incorrect final position

Repro: https://codepen.io/calinoracation/pen/ZEZRJZx

In this example if you compare Chromium to Safari you'll notice that there's unexpected positioning of the chips at the end of the transition compared to Chrome where they are stable.

This example has a transition on the button that offsets it, but even without that we still see the positioning incorrect.

I'm not sure if it's related, but we also see that something might be up with the transform origin when scaling things in. There definitely seems to be a difference from Chrome and Safari when used inside of View Transitions. It might also be our usage of linear-easing springs, but I think that bug was fixed in 17.4 and we're still seeing the issue so likely just in the View Transitions side.
Comment 1 Callie Riggins 2024-04-11 14:22:22 PDT
Created attachment 470873 [details]
Chrome's rendering for comparison

This is the comparison running that same CodePen for View Transitions in Chrome.
Comment 2 Tim Nguyen (:ntim) 2024-04-11 23:14:22 PDT
Thanks for reporting! This looks fixed with the fix from bug 272130. The shift at the end is caused by the drop shadow filter which triggers visual overflow.

*** This bug has been marked as a duplicate of bug 272130 ***