Skip to content

[css-contain-3][css-anchor-position-1] Containment makes it difficult to use anchor positioning with container queries #10040

Closed
@mirisuzanne

Description

@mirisuzanne

Currently, container queries rely on several types of containment: size, layout, and style. This already causes some confusion with authors, when fixed-position elements nested in a container are now fixed to the container rather than the viewport (thanks to layout containment).

That issue will become much more noticeable when container queries interact with anchor positioning. As currently defined, layout and style containment will make it impossible for elements to anchor across different containers. I think that will mean:

  • Positioned elements outside a container cannot see anchors inside a container, since style containment scopes the anchor name.
  • Positioned elements inside a container cannot use an anchor outside the container, since layout containment doesn't allow reference to external layout? (I'm less clear on the interaction here)

While these decisions all make sense in terms of 'the promise' that each containment makes, it will cause a lot of problems for users who want to use both container queries and anchor positioning. Authors should be able to use these features without one constantly interfering with the other.

Since container queries are somewhat abstracted away from containment (we set a container-type, and browsers apply containment as-needed), I think the only path forward here is defining more subtle and targeted containment rules for container queries. Are there ways that we can relax how much layout and style containment is required to make container size queries work?

(This came out of discussion on #9349)

/cc @tabatkins

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    In progress

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions