[csswg-drafts] [css-position] Referencing different viewports in sticky positioning (#8934)

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

== [css-position] Referencing different viewports in sticky positioning ==
This proposal seeks to extend the CSS positioning specification to allow elements with sticky positioning to reference the small, large, or dynamic viewport in a similar manner to viewport units.

Currently, an element with sticky positioning attaches to the dynamic viewport's bottom, causing it to shift upwards when the User Agent (UA) interfaces expand, which may not always align with the designers' intentions.

Proposed solution (property name and values up for bike shedding):
```css
.sticky {
  position: sticky;
  bottom: 0;
  sticky-viewport: large;
}
```

This modification allows elements to be sticky relative to the specified viewport.

Consider an editorial article featuring a 100lvh tall visualization that sticks to the viewport's bottom. The current spec may push part of this visualization off-screen when the UA interface expands. While sizing the visualization to the dynamic viewport is a workaround, it alters the layout when the interface expands or collapses.

Allowing elements to be sticky to the large viewport enables designers to accommodate the UA interface, thereby maintaining a consistent layout regardless of whether the UA interface is expanded or collapsed.


Link to Relevant Spec Section: [Position Property](https://drafts.csswg.org/css-position/#position-property)

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


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

Received on Thursday, 8 June 2023 05:54:41 UTC