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

Okay so while it's good that we got a resolution to do *something* in this space, we still need to work out details.

As far as I can see, there are two independent cases we might want to address:

1. Clip as if you're sitting next to your anchor. That is, use *precisely* the clipping that your anchor does, so there's no difference in clip behavior between "popup is next to the anchor in the markup" and "popup is somewhere unrelated in the markup", or between "popup is using abspos" and "popup is using fixpos/top layer".
2. Hide yourself when your anchor is clipped away. For example, a sidenote displaying alongside a scrollable region of text can't reuse the clip area like in (1), since it's positioned outside the scrollport bounds already, but it still wants to stop rendering when the anchor is scrolled out of the scrollport. Possibly we want to differentiate between "anchor starts to get clipped by something" and "anchor is fully clipped away". Probably we want to use the anchor's border box; I doubt this needs to be controllable.

(2) *might* be most simply solved by allowing a positioned element to be clipped by its inset-modified containing block? The sidenote case, for example, would look like:

```css
.sidenote {
  position: fixed;
  top: anchor(--container top);
  bottom: anchor(--container bottom);
  left: anchor(--container right);
  right: 0;
  anchor-default: --target;
  align-self: anchor-center;
  clip-to-containing-block: true;
}
```

This does rely on `anchor-center` for positioning, tho; if you wanted any other alignment you'd be out of luck, since you're having to use your top/bottom to give yourself clipping bounds. It also relies on the scroll container having an anchor-name, rather than just relying on the nearest scroll container of the default anchor, which is probably what you want. So probably we do instead want to more explicitly reference the bounds of some scroller, defaulting to the default anchor element's nearest scroll container, like:

```css
.sidenote {
  position: fixed;
  anchor-default: --target;
  top: anchor(top);
  left: anchor(--container right);

  /* vertically clips to the bounds of the default anchor's nearest scroller */
  position-clip: vertical;

  /* inline-axis clips to the specified element, which must be a scroller */
  position-clip: inline --some-container;
}
```

Hmm. More thought is needed here.

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


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

Received on Wednesday, 7 February 2024 00:31:20 UTC