Re: [csswg-drafts] [css-view-transitions-1] Should contain layout/paint be required (#8139)

The case Jake described is the reason I'm advocating against forcing the shared element to be a containing block for positioned descendants. For the layout issue mentioned in the first comment, where the nested element moves with the shared element as a part of its snapshot, developers can easily workaround this by making the descendant a shared element.

Here is a concrete example which simulates what will happen if the ancestor shared element is not a containing block for a fixed position descendant:

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <style>
    .inner {
      position: absolute;
      width: 100px;
      height: 100px;
      background: blue;
    }
    
    .outer {
      position: fixed;
      width: 200px;
      height: 200px;
      background: red;
      view-transition-name: foo;
      contain: layout;
    }
    
    .outer_old {
      top: 0px;
      left: 0px;
    }
    .outer_new {
      top: 50px;
      left: 50px;
    }
    
    .inner_old {
      top: 10px;
      left: 10px;
    }
    .inner_new {
      top: -40px;
      left: -40px;
    }
    
    button {
      position: fixed;
      top: 250px;
    }
  </style>
  <script>
    function doTransition() {
      document.startViewTransition(() => {
        outer.classList.toggle("outer_old");
        outer.classList.toggle("outer_new");
        
        // Change position to simulate pos: fixed.
        inner.classList.toggle("inner_old");
        inner.classList.toggle("inner_new");
      });
    }
  </script>
<body>
<div class="outer outer_old" id="outer">
  <div class="inner inner_old" id="inner"></div>
</div>
<button onclick="doTransition()">Animate</>
</body>
</html>
```

The start/end viewport positions of `inner` will be based on its containing block in author DOM, which is the ICB. The animation definitely looks awkward because of the way `inner` fades out and then fades in at the same location. But if `inner` is also made a shared element, there is no issue.

On the other hand if we force shared elements to become containing blocks, authors will have no choice but to change the DOM topology if there are positioned descendants. This can be fairly complicated. Also want to point that this is not a theoretical case, we have seen partner use-cases like this.

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


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

Received on Tuesday, 17 January 2023 02:55:39 UTC