Re: [csswg-drafts] [css-anchor-position-1] Interaction between trying position options and CSS transitions (#13048)

> So..
> 
> PROPOSED: Position-try checks are suspended during interpolation for transitions and animations, but the end point (keyframe) needs to take them into consideration before calculating the interpolation path.
> 
> PROPOSED: Clarify that transitions are triggered when switching position-try options (though not when merely checking an option).
> 
> CC [@anttijk](https://github.com/anttijk) [@flackr](https://github.com/flackr) [@lilles](https://github.com/lilles) Does this make sense?

Blink currently does position-try checks without transitions and animations applied.

For animations, it means none of the keyframes will affect fallback position (but also that underlying style changes may affect fallback position even when e.g. the computed width doesn't change because a width animation is in effect):

```html
<!DOCTYPE html>
<style>
  #anchor {
    margin-left: 100px;
    width: 100px;
    height: 100px;
    anchor-name: --a;
    background-color: blue;
  }
  #anchored {
    position: absolute;
    position-anchor: --a;
    width: 100px;
    height: 100px;
    background-color: lime;
    position-area: left center;
    position-try-fallbacks: flip-inline;
    animation: --width 2000s;
  }
  @keyframes --width {
    from {
      width: 100px;
    }
  }
</style>
<div id="anchor"></div>
<div id="anchored"></div>
```

For transitions, the fallback will change based on the after-change style, which means this will flip immediately:

```html
<!DOCTYPE html>
<style>
  #anchor {
    margin-left: 100px;
    width: 100px;
    height: 100px;
    anchor-name: --a;
    background-color: blue;
  }
  #anchored {
    position: absolute;
    position-anchor: --a;
    width: 100px;
    height: 100px;
    background-color: lime;
    position-area: left center;
    position-try-fallbacks: flip-inline;
    transition: width 2000s;
  }
</style>
<div id="anchor"></div>
<div id="anchored"></div>
<script>
  anchored.offsetTop;
  anchored.style.width = "200px";
</script>
```

I'm unsure if the proposed edits affect how we do transitions. Unsure if this changes anything for re-targeting transitions.

For animations we definitely need to change. Immediately, that sounds doable at least.


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


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

Received on Friday, 2 January 2026 12:51:38 UTC