[css-position][css-position-3] Padding on scroll container affects (and inconsistently) the offset behavior of sticky position

Open
#3,352 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Documentation
Clarity
Needs clarification
Activity status
Stale
Tech stack
css
Domain
documentation

Research direction

Read the sticky positioning section in CSS Position 3, then reproduce the three scrollers in the linked JSFiddle and compare their padding offsets. Review the linked Chromium issue and comment history; done means the intended behavior is resolved and the specification clearly defines or documents the differing cases.

Written by the indexing model from the issue text.

Description

css-position-3

IMHO padding on the scroll container shouldn't even be affecting offset behavior of what authors think of as the "edge" of the scroll container, but since it does, then it should be doing so consistently, or at least documented.

https://drafts.csswg.org/css-position-3/#sticky-pos
https://bugs.chromium.org/p/chromium/issues/detail?id=814141#c_ts1524700607

Test Case - http://jsfiddle.net/jonjohnjohnson/eagx28jp/

Why aren't all three of the vertical scrollers in the example spec'd to to exhibit the same sticky offset when using the same box offset values?

The chromium issue provided above even shows blink deciding to go with interop of this strange/unspecified behavior.

  • The right scroller shows padding on the body not affecting offset.
  • The middle scroller shows padding affecting offset.
  • The left scroller shows padding on an element inside the scroller not affecting offset.

I'm guessing this is because of the age old quirk of padding on scroll container rarely being intuitive or consistent? And here, though body (or even if you change the selectors that match body to html, then html as well) has the non-zero padding, it doesn't keep its geometry in place as its content scrolls through, unlike other scroll containers? In other words, the left and middle scrollers.

If this is the desired behavior/interop, we at least need it communicated clearly in the spec.

cc @atanassov @arronei @stephenmcgruer

Dominant language
Bikeshed
Stars
4.9k
Forks
816
Avg merge
2d 18h
Merged PRs (30d)
24

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from w3c/csswg-drafts

All issues in w3c/csswg-drafts

Similar issues

More Documentation issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.