Re: [csswg-drafts] [css-view-transitions-2] Nested transitions: what happens if there is a mismatch? (#10631)

I just ran into this while working on a site and I'd like to propose a modified version of option 3:
Creating a pseudo common ancestor that has a clipping shape that includes both containers and the space between them, somewhat like this:
![image](https://github.com/user-attachments/assets/613a19b7-44e2-41db-b068-301c01b45321)
This avoids the moving child popping in or out on the opposite end of the containers.

One thing I'm not sure on is the exact shape of the ancestor since the clipping boundaries of the two containers might not be square. Ideally, the pseudo-ancestor would have its exact shape determined by some sort fill between the two containers that leaves their far edges as they are and only includes the space between that an element would be travelling through.
I think the most common problem would be rounded corners and maybe more fancy, nine-sliced corners/edges.

Also, here's my real-world example of this causing issues:

[CrossUniverseClipping.webm](https://github.com/user-attachments/assets/8afe4e22-bef8-4e4e-b7e3-95e208545b3f)

-- 
GitHub Notification of comment by Psychpsyo
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10631#issuecomment-2267114444 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 3 August 2024 19:37:56 UTC