Re: [csswg-drafts] [css-anchor-1] Behavior with transforms and offset-path (#8584)

(copied with modifications from the OpenUI discord)

I thought about a case where we'd want to follow the transform of the target's container: https://codepen.io/kizu/pen/WNLYRvx

Basically, what if we want to attach a popover to a button inside a rotated, or otherwise transformed container?

Here is what we get right now in this example (in Canary with experimental platform features flag due to anchor positioning), when the element is outside of the rotated container (inside the rotated one things are obviously ok), or when it is yoinked into the topmost layer via popover API:

<img width="306" alt="A screenshot of an example with a button and a popover, where the button is placed in a rotated container, with a popover attached to it, but the popover itself is not rotated, so it is “detached” from the button" src="https://github.com/w3c/csswg-drafts/assets/177485/cc3915d6-cb42-43c4-91cb-8ac164036000">

This can also be a case for when someone implements a sliding side-panel, with sliding animated via a transform, but then what if the panel would contain a `defaultOpen` popover that should be attached to some element via anchor positioning? With the way things work now, that element would exist completely outside of the transformed space, and to replicate what we want to achieve, we'd have to do _a lot_ of work by manually transforming the popover.

For regular abspos, we could argue, that the idea was that we now could place the popover near the element, so we would expect the behavior as in the third container in the codepen:

<img width="345" alt="A screenshot of a rotated container, a button inside and an abspos element attached to the button, following the rotation of the container." src="https://github.com/w3c/csswg-drafts/assets/177485/22f8f6f9-5f07-4e1c-a14a-7db6e5cb8d47">

But then, when we have a Popover API — the element is reparented to the topmost layer, thus loses that transformation context.

Should we be able to either somehow follow a transformation of a selected element, or be able to disable putting the element in the topmost layer (which, I imagine, can be problematic on its own?), or something else?

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


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

Received on Thursday, 5 October 2023 21:13:31 UTC