Re: [csswg-drafts] [css-anchor-1] Need ability to say "don't render" when anchor is off-screen (#7758)

Tab and I discussed the uses cases in this issue and #9380 and tried to come up with a proposal to handle them all. There are a few major cases to address:

1. Make a positioned element act like it's inside its anchor's scroller (clipped by the intervening scrollers). This is already proposed to be handled by `position-container`. See [earlier comment](https://github.com/w3c/csswg-drafts/issues/7758#issuecomment-1935048879) and [issue 9868](https://github.com/w3c/csswg-drafts/issues/9868).
2. Make the positioned element act like it's outside the anchor's scroller (as normal), but hide itself if the anchor would be clipped away by the intervening scrollers. (Doesn't make sense to display the positioned element if its anchor isn't visible.) See [Tab's comment](https://github.com/w3c/csswg-drafts/issues/7758#issuecomment-1931019866).
3. Make a positioned element hide itself if all of its `position-try-options` result in overflow. See [issue 9380](https://github.com/w3c/csswg-drafts/issues/9380).


Our current suggestion for handling both 2 and 3 is a new `position-visibility` property:

```
position-visibility: always | [ anchors-valid | anchors-visible ] || no-overflow
```

* `always` is the initial value; the abspos is always visible (as currently)
* `anchors-valid` hides the abspos if any of the anchors it depends on are missing. Absposes depend on their default anchor element and any anchor element referenced in an `anchor()`/`anchor-size()` function without a fallback value.
* `anchors-visible` hides the abspos if any of the anchors it references are missing or invisible (and it hasn't explicitly specified a fallback value), where invisible means either its not `visibility: visible` or it's been clipped by `overflow` of an intervening container. (We're also considering `clip-path` for this check.)
* `no-overflow` hides the abspos if it overflows its inset-modified containing block (after exhausting all `position-try` options, if relevant). Note this value would apply even when using regular abspos or fixedpos.

In all these cases, “hide” means that it (and all of its contents) are invisible (like ''visibility: hidden'') and do not contribute to scrollable overflow.

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


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

Received on Monday, 26 February 2024 23:57:53 UTC