csswg-drafts (original) (raw)

@fantasai and I recently committed a new default safety behavior for abspos elements, largely to make elements using Anchor Positioning and position-area work better. In short, the element is first aligned within its IMCB as normal, but if that would overflow, it shifts to stay within its "original containing block" (before reduction from position-area, inset, etc) until it would overflow that too, at which point it aligns unsafely within the larger block. (Technically, it uses the bounding box of its IMCB and its original CB; this makes it act better when it's being positioned well outside of the original CB.)

@bfgeek has been experimenting with implementing this, and has ran into a few situations where we think the definitions need tweaking.

This behavior currently applies in situations like, say, position-area: right. If the anchor is too close to the right edge of the screen, so that the right area is too narrow, the element overflows over the anchor. That's probably not what the author intended; we believe in this situation it's better to stick to unsafe alignment and just overflow off to the right.

In terms of edits, I think the relevant text is that if you are using position-area, you only do this medium-safety alignment in an axis if your area covers the center track in that axis. Otherwise, the default alignment from position-area should be unsafe in that axis.

That is, position-area: bottom span-right would allow the element to shift leftwards to avoid overflow (as the area is already covering the horizontal center track), but not shift upwards to avoid overflow (as the area does not cover the vertical-center track).

This implies that bottom right would be unsafe in both axises, even tho it could in theory shift up or left and avoid overlapping the anchor. Perhaps in this case we should default it to unsafe in one axis and medium-safety in the other? I don't know if it's possible to really predict which is better for a given situation, so maybe just let it be medium-safety in the inline axis and unsafe in the block axis, to reduce the chances of popping a horizontal scrollbar.