[css-position][css-sticky] Negative margin, sibling element flow placement, containing block overflow compatibility between chrome/safari/firefox
Reported by
h...@jonjohnjohnson.com,
Sep 5
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3516.0 Safari/537.36 Steps to reproduce the problem: 1. Open up chrome canary, safari tech preview, and firefox nightly. 2. Go to this test case in each browser -> http://next.plnkr.co/edit/e5bsCLIIF5rtiFOJ?preview 3. Notice how each browser treats negative margins on the green sticky element differently. 4. The case highlights differences in... - Inaccessible overflow at start edge - Negative margin on the top edge creating "negative" margin on subsequent sibling element - Negative margin on the top edge treated differently based upon containing block being the scrolling block with padding or not? What is the expected behavior? Uniform position sticky layout between major browsers. What went wrong? Major browsers rendering engines behave quite differently when dealing with negative margins on stickily positioned elements. The attached image shows screenshots of the same test case rendered in chrome canary (top), safari tech preview (middle), and firefox nightly (bottom). Left side scrolling box has padding, right side scrolling box has a child inside it with equivalent padding values. Did this work before? N/A Does this work in other browsers? N/A Chrome version: 70.0.3516.0 Channel: canary OS Version: OS X 10.12.6 Flash Version:
,
Sep 5
Here is the current spec text: https://www.w3.org/TR/css-position-3/#sticky-pos Yea, currently there is really no standard how margins on a stick-pos element should be handled. e.g. negative margin, margin collapsing, and stuff. Stephen, do you know who might be working on the standardization of position:sticky?
,
Sep 5
Here is a link to the current draft -> https://drafts.csswg.org/css-position-3/#sticky-pos List of all open issues relating to sticky for the csswg -> https://github.com/w3c/csswg-drafts/issues?utf8=✓&q=is%3Aissue+is%3Aopen+sticky Here is a testcase that at least shows agreement between browsers on use of positive margin values against the opposite edge sticking offset (showing a bottom edge sticking element that uses a top margin of 100vh that moves into view once scrolling starts) -> http://output.jsbin.com/lahoqem/
,
Sep 6
,
Sep 10
Over to flackr for position sticky triage.
,
Dec 10
Seems like this could have been inadvertently *fixed, as blink has changed to at least mirror gecko. |
||||
►
Sign in to add a comment |
||||
Comment 1 by h...@jonjohnjohnson.com
, Sep 5