Skip to content

[css-anchor-position] fallback-position behavior: spec vs. expectation #12682

@meyerweb

Description

@meyerweb

In recent experiments with thumb sliders and anchor positioning, I discovered that Chrome 139 and Safari Technology Preview 226 (the latest as I write this) behave differently on the following testcase:

https://codepen.io/meyerweb/pen/jEbpgEj

For clarity’s and posterity’s sake, here are videos of both behaviors:

I put up a quick Mastodon poll, and people who saw it and voted preferred the Safari behavior by about 5:1 (but make sure to read the replies, which contain arguments in favor each behavior). It’s also what the Oddbird anchoring polyfill does, I’m told. I was ALSO told that Chrome is doing what the spec calls for, as per https://drafts.csswg.org/css-anchor-position-1/#last-successful-position-option.

I know well that polls are no guarantee of capturing reality, but I think it’s worth discussing whether A) the default behavior should or should not be changed to match Safari’s; and B) there should be a property or keyword that lets authors choose which of those behaviors they get, regardless of what we think about issue A.

I also have concerns around how (or if) fallbacks should provide ways to handle overlap of anchored elements once a fallback is invoked, but I’m not sure that discussion belongs in this issue.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions