Re: [csswg-drafts] [css-position-3] Sticky position and margins (should margins be considered at all?). (#9052)

The dual implication of margin on sticky elements has [been an issue](https://github.com/w3c/csswg-drafts/issues/2496) and if it's web compatible it will be good to clean up that ambiguity. However, the margin has been our only way of controlling the "sticky constraint rectangle" (or the "sticky view rectangle" as it was called in the discussion). 

[jonjohnjohnson](https://github.com/jonjohnjohnson) has described a couple of use cases for controlling the SCR in [the issue](https://github.com/w3c/csswg-drafts/issues/2496), but I'll add another here for reference:

<details>
  <summary>Use case for controlling the sticky constraint rectangle</summary>
  
  ### Article with sticky headers
  An article has multiple sections, and each section has a sticky header element.
  When the user reach the bottom of each section, the header element should be pushed out of view, 
  before the next section and header element is scrolled into view. 
  
 Currently, the solution for limiting the sticky constraint rectangle is to set a margin-bottom on the sticky element, and then negating that margin on the following sibling:

  ```html
  <article>
    <section>
      <header>...</header>
      ...
    </section>
    <section>
      <header>...</header>
      ...
    </section>
  </article>
  ```
  ```css
  header {
    position: sticky;
    margin-bottom: 90vh; /* Limit SCR */
  }
  
  header + * {
    margin-top: -90vh; /* Negate effect of margin bottom */ 
  }
  ```
</details>

As it's been resolved to ignore margins in sticky-pos calculations, can we find another way to control the SCR? Something similar to `scroll-margin`?

I know we have content that use margin to control the SCR, and we will have to find other solutions when this is implemented. The only solution (that I can think of) that is supported in browsers today is to add padding to the block level ancestor, and then negate that in the child nearest to the padding edge. That feels even worse than what we do today.

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


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

Received on Tuesday, 14 November 2023 07:15:53 UTC