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

So, what should the spec say?

Current status:

https://drafts.csswg.org/css-anchor-position-1/#determining-position
> Post-layout effects, such as [transform](https://drafts.csswg.org/css-transforms-1/#propdef-transform), do not affect the [anchor box’s](https://drafts.csswg.org/css-anchor-position-1/#anchor-box) position.
> Note: Allowing an anchor to opt into including the effects of [transform](https://drafts.csswg.org/css-transforms-1/#propdef-transform) or similar properties might be allowed in the future.

Then, about taking scrolling into account: https://drafts.csswg.org/css-anchor-position-1/#issue-141fd32f
>  Transforms have the same issue as scrolling, so Anchor Positioning similarly doesn’t pay attention to them normally. Can we go ahead and incorporate the effects of transforms here?

And: https://drafts.csswg.org/css-anchor-position-1/#issue-a8569080
> Similar to [remembered scroll offset](https://drafts.csswg.org/css-anchor-position-1/#remembered-scroll-offset), can we pay attention to transforms on the [default anchor element](https://drafts.csswg.org/css-anchor-position-1/#default-anchor-element)?

Do we want to take an anchor's transforms into account, and how far would we like to go? Only honor those on the default anchor when at an anchor recalculation point? Or more? We don't want to allow transforms to affect layout, ever, I assume, not even as an opt-in? Because that means main-thread work, and no compositing.

Otherwise we could do funny things like this (video below):

```html
<!DOCTYPE html>
<style>
  .transform {
    transition: 2s transform;
  }
  .transform:hover {
    transform: rotate(500deg) scale(0.5) translateX(200px);
  }
  .dot {
    position: absolute;
    position-anchor: --a;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: hotpink;
  }
</style>
<div style="width:fit-content; margin:100px;">
  <div class="transform" style="display:inline-block; anchor-name:--a; width:350px; height:350px; background:cyan;">
    Hover me. Whee!
  </div>
</div>
<div class="dot" style="position-area:right;"></div>
<div class="dot" style="position-area:left;"></div>
<div class="dot" style="position-area:top;"></div>
<div class="dot" style="position-area:bottom;"></div>
```

https://github.com/user-attachments/assets/a8ce8ef9-3f53-4e17-b49a-871a9876fc4d

And by taking an anchor's transforms into account, use its bounding box after transforms have been applied?

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


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

Received on Thursday, 24 April 2025 09:37:57 UTC