[csswg-drafts] [css-anchor-position-1] Select the fallback position where more content is visible, not the last (#9047)

tigrr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-anchor-position-1] Select the fallback position where more content is visible, not the last ==
When all fallback positions fail, the current spec [tells](https://drafts.csswg.org/css-anchor-position-1/#determine-the-position-fallback-styles) to use the last fallback position.:

> If the previous step finished without selecting a set of styles, use the adjusted styles corresponding to the final entry in the [position fallback list](https://drafts.csswg.org/css-anchor-position-1/#position-fallback-list).

This creates a strange behavior where a rather big element will be placed at a position where it is hardly visible on the screen, whereas other positions provided better visibility.

In [this demo](https://jsfiddle.net/tikosar/5g6vefa3/) the anchor (pink) is close to the bottom of the page, so the anchored element (cyan) is hardly visible. If it was positioned on top, it would be mostly visible.

I propose changing the spec to select the fallback position which provided more element area to be visible on screen.

As next actions, the author may choose to limit the size of the anchored element to fit the screen.

Think dropdown with many items. It must be positioned under the trigger or above if there is more space above. Then dropdown's height may be limited to fit on the screen and cause scroll inside the dropdown menu.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9047 using your GitHub account


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

Received on Sunday, 9 July 2023 03:01:10 UTC