Bug 272556

Summary:

[view-transitions] Final position not calculated correctly when applied to view-transition element

Product:

WebKit

Reporter:

Callie Riggins <callie.riggins>

Component:

Animations

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

callie.riggins, dino, graouts, ntim

Priority:

Version:

Safari Technology Preview

Hardware:

Mac (Apple Silicon)

OS:

macOS 14

Attachments:

Description	Flags
Safari Technology Preview of incorrect final position	none
Chrome's rendering for comparison	none

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 ***