[css-view-transitions-2] view-transition-group and the root element
#10632
Comments
|
/cc @khushalsagar @vmpstr |
|
The behaviour of picking root if the author says |
I'm thinking that in most cases nesting to So if someone has CSS like It's not a big deal, but I think it's worth mentioning that nesting to the root element's group is a bit of a strange result and we should mind it and at least add a note. |
I didn't follow this. container transform is a good example of where this would be helpful. It's an element -> root transition. If you want all children of the root to be clipped by it, you'd want to place them underneath the |
Yea I guess it makes sense from the point of view of the old element. |
That is not the case. The VT elements draw into their own stacking context and don't have root clips apply to them. Try this example: <html>
<body>
<style>
:root {
background: grey;
}
:root.new {
clip-path: circle(80%);
}
.outside {
position: fixed;
bottom: 0px;
height: 10px;
width: 100vw;
background: red;
view-transition-name: outside
}
::view-transition-group(outside) {
animation-duration: 1s;
}
</style>
<button onclick="doTransition()">Animate</button>
<script>
async function doTransition() {
await document.startViewTransition(() => {
document.documentElement.classList.toggle('old');
document.documentElement.classList.toggle('new');
}).finished;
}
</script>
<div class="outside"></div>
</body>
</html>The named element isn't clipped by the root's clip during the transition. This was an intentional choice, otherwise clips on the new Document root would immediately start applying to old snapshots. |
|
I think I'm satisfied with this, closing. |
According to the resolution of #10334, it's possible to specify a custom ident as the
view-transition-group, or e.g.nearest.When the root element has a
view-transition-name(which isrootby default),nearestorview-transition-group: rootmight make it so that the root group would be the container instead of the global::view-transition. This could often be unintended and not necessarily desired.Alternatives:
rootis just like everything elserootis never a containing groupnearestdoesn't apply to the tree root, but it can be explicitly targeted (view-transition-group: root) or use contain(e.g.
::root { view-transition-group: contain })The text was updated successfully, but these errors were encountered: