Re: [csswg-drafts] [css-view-transitions-1] Clarify rendering constraints for elements participating in a transition (#8139)

One decision remaining on this, is how we should handle:

- **named-element** has a `view-transition-name`
- **child**, is a child of **named-element**, is fix-pos, and uses a containing block that's parent to **named-element**

```html
<style>
  .named-element,
  .child {
    width: 150px;
    height: 150px;
    background: green;
  }

  .named-element {
    view-transition-name: named-element;
    margin: 120px;
  }
  
  .child {
    background: blue;
    position: fixed;
    top: 0;
    left: 0;
  }
</style>
<div class="named-element">
  named-element
  <div class="child">child</div>
</div>
```

Which looks like this:

![Screenshot 2023-01-25 at 15 58 18 copy](https://user-images.githubusercontent.com/93594/214612855-0ec4653e-8769-49e2-86cd-b34c3e965fe0.png)

How should the view-transition work, considering changes to `named-element`, such as position and background color?

## Option 1: Capture as-is

Capture `named-element` and all its content. The size of the image is the border box of `named-element`.

Here's how the background color and position transitions would look:

https://user-images.githubusercontent.com/93594/214614069-f1f6e456-9914-4aff-93de-a0bc8e154094.mp4

The background color animation looks good. However, the position transition doesn't look 'right', since the captures move with the bounding box of `named-element`, yet the child has remained fixed.

If this isn't what the developer wants, they can make the child part of the transition too:

```css
.child {
  view-transition-name: child;
}
```

And the result:

https://user-images.githubusercontent.com/93594/214615591-1001be16-7457-4431-b60f-132eb94b4e7b.mp4

## Option 2: Exclude the child from the capture

`named-element` is captured excluding the child, because it uses a containing block that's an ancestor of `named-element`. The child is instead captured with the view-transition part that's closest (as in `el.closest()`) to the child's containing block, which is the root in this case.

Here's how that would look:

https://user-images.githubusercontent.com/93594/214616580-5e09507e-c1c2-44bc-aac8-fec90536f3c1.mp4

This doesn't look quite right, as the `named-element` appears over the child during the transition, since the child is now painted onto the root.

The fix is the same as before, which is to make the child part of the transition.

## Option 3: Force a containing block

Adding a non-`none` `view-transition-name` to an element causes it to be a containing block, similar to `opacity` values less than `1`, and transforms.

When the developer does this, their layout will break, which should be easy to spot.

The best fix for this would be for the developer to change the DOM so the fix-pos element is no longer within `named-element`.

This is already the case if the developer wants to animate a transform.

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


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

Received on Wednesday, 25 January 2023 16:26:15 UTC