CARVIEW |
Select Language
HTTP/2 200
date: Sat, 11 Oct 2025 00:38:15 GMT
content-type: text/html; charset=utf-8
cache-control: max-age=0, private, must-revalidate
content-security-policy: default-src 'none'; base-uri 'self'; child-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com *.rel.tunnels.api.visualstudio.com wss://*.rel.tunnels.api.visualstudio.com github.githubassets.com objects-origin.githubusercontent.com copilot-proxy.githubusercontent.com proxy.individual.githubcopilot.com proxy.business.githubcopilot.com proxy.enterprise.githubcopilot.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com wss://alive-staging.github.com api.githubcopilot.com api.individual.githubcopilot.com api.business.githubcopilot.com api.enterprise.githubcopilot.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com copilot-workspace.githubnext.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: blob: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com private-avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com release-assets.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com marketplace-screenshots.githubusercontent.com/ copilotprodattachments.blob.core.windows.net/github-production-copilot-attachments/ github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/
link: ; rel=preload; as=fetch; crossorigin=use-credentials
referrer-policy: no-referrer-when-downgrade
server-timing: issue_layout-fragment;desc="issue_layout fragment";dur=417.787267,issue_conversation_content-fragment;desc="issue_conversation_content fragment";dur=1102.204276,nginx;desc="NGINX";dur=0.775827,glb;desc="GLB";dur=138.250899
strict-transport-security: max-age=31536000; includeSubdomains; preload
vary: X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, X-Requested-With, Accept,Accept-Encoding, Accept, X-Requested-With
x-content-type-options: nosniff
x-frame-options: deny
x-voltron-version: aab62e3
x-xss-protection: 0
server: github.com
content-encoding: gzip
accept-ranges: bytes
set-cookie: _gh_sess=Idm7vWsbBhmG0yFQgtRWYRj3Jb5ztFt%2BDO%2BH6YpAirhbjNzb2%2B%2FJWPRfOGYshiZp0GkrywfcAZhFu2O527c6hUAgWIkKJ2ApGOuRa6jKVK6TZvqHwu7dT%2FFo2BgG2WzBCV9qoEy7JDnEUYE4ZuB6aae5jhT19oQs6KwjRcV5IFJjjkTejeIHhJSO%2FWUiMZaXNmpG12eAtvx%2BcKFsNN6PtUgpQnbuSHq5tLvI%2B4yf1e3p4E%2BaElK4pbtfqnBk%2BcPAbRCd91105DWzZyxiulYImQ%3D%3D--ylObtIY4oQ6rrG0z--gUyGwCoHx90soStYQJbZKw%3D%3D; Path=/; HttpOnly; Secure; SameSite=Lax
set-cookie: _octo=GH1.1.890585479.1760143094; Path=/; Domain=github.com; Expires=Sun, 11 Oct 2026 00:38:14 GMT; Secure; SameSite=Lax
set-cookie: logged_in=no; Path=/; Domain=github.com; Expires=Sun, 11 Oct 2026 00:38:14 GMT; HttpOnly; Secure; SameSite=Lax
x-github-request-id: 8FEA:F5D11:1AA999:26A8BB:68E9A6F6
[css-view-transitions-2] Nested transitions: what happens if there is a mismatch? · Issue #10631 · w3c/csswg-drafts · GitHub
No one assignedNo typeShow more project fieldsNo milestoneNone yetNo branches or pull requests
Skip to content
Navigation Menu
{{ message }}
-
Notifications
You must be signed in to change notification settings - Fork 747
Closed
Closed
Copy link
Labels
css-view-transitions-2View Transitions; New feature requestsView Transitions; New feature requests
Description
Follow up on #10334 (nested transitions)
It's clear what happens when both the old and new state have the same view-transition-group
.
We need to specify, however what happens when there is a mismatch.
Note that this mismatch can happen by use of keywords like nearest
.
Example:
A box sliding between two clipping containers
Several solutions to a mismatch:
- new capture wins (like
view-transition-class
) - Old capture wins
- Fallback to nearest common ancestor
- Split to two groups, one with the old pseudo and one with the new pseudo. The two groups have a default transform animation that represents moving the element from the old position to the new.
Trade-offs:
- Option (1) is consistent with
view-transition-class
, however can create an abrupt experience: in the attached example, the element would disappear at the beginning of the transition and would animate in later. - Option (2) has the opposite issue: the element would disappear and would abruptly appear at the end.
- Option (3) seems plausible and easy to understand, however would also have an abrupt effect, as all clipping would be lost for the duration of the transition and brought back at the end.
- Option (4) doesn't have an abrupt effect by default, as the old element would animate out of the old position and the new element would animate into its new position, however loses the "crossfade" effect and might be a bit more complex to implement.
I tend to support option (4) because of the following:
- Option (3), for example, is trivial to achieve by using the common ancestor as the containing group in the first place. So having it as the default for mismatch doesn't add much value.
- Option (1) and (2) wouldn't work well (an even more abrupt effect) if the containing group has an entry/exit animation. The element would immediately disappear from the old container as the old container is fading away, and would fade in with the new element.
- Crossfade might not be the right animation here anyway. When moving between different containers, those containers can have different backgrounds, and they might crossfade between themselves. So crossfading the internal element is not necessarily the correct default, though still achievable by selecting the appropriate
view-transition-group
.
Metadata
Metadata
Assignees
Labels
css-view-transitions-2View Transitions; New feature requestsView Transitions; New feature requests
Type
Projects
Status
Regular agenda items
Milestone
Relationships
Development
Issue actions
You can’t perform that action at this time.