[csswg-drafts] [css-view-transitions-1] What is the transform relative to for `::view-transition-group` (#8599)

khushalsagar has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions-1] What is the transform relative to for `::view-transition-group` ==
This came up when we were discussing #8278. The UA sets a transform on `::view-transition-group` to position where the underlying DOM element is. The spec text for it is [here](https://drafts.csswg.org/css-view-transitions-1/#:~:text=A%20transform%20that%20would%20map%20element%E2%80%99s%20border%20box%20from%20the%20snapshot%20root%20origin%20to%20its%20current%20visual%20position.).

This transform is relative to the top-left corner of the snapshot root. This works because `::view-transition-groups`'s containing block is `::view-transition` and `::view-transition` covers the complete snapshot root based on the resolution we had at #8278.

In terms of why top-left and what that means for LTR content:

- I was initially confusing this question with the one on #8370 which was about whether the transform is relative to the pseudo-element's top left corner or center. That would affect a rotation for example. Since the default value for `transform-origin` is center of the box, it implicitly has to be relative to that.
- The other question is whether `translateX(10px)` moves the element to the left by 10px or to the right, and whether it is dependent on `writing-mode`. It looks like `transform` is independent of `writing-mode`. `translateX(10px)` will always move to to the right. Here is an example:
   ```
   <!DOCTYPE html>
   <html>
   <head>
      <style>
         html {
           writing-mode: vertical-rl;
         }

      .foo {
        width: 100px;
        height: 200px;
        background: blue;
        transform: translate(50px);
      }
     </style>
   </head>
   <body>
     <div class="foo"></div>
   </body>
   </html>
   ```

@fantasai did I get your question right? @astearns FYI.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8599 using your GitHub account


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

Received on Wednesday, 15 March 2023 22:02:08 UTC