Re: [csswg-drafts] [css-view-transitions-2] `view-transition-group` and the root element (#10632)

> From the new element point of view, let's say the document element has a clip-path. That clip-path would clip the ::view-transition-group(foo) whether it's nested or not

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

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


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

Received on Tuesday, 30 July 2024 14:31:40 UTC