Summary: | [css-position][css-sticky] Negative margin, sibling element flow placement, containing block overflow compatibility between chrome/safari/firefox | ||||||||
---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | jonjohnjohnson <hi> | ||||||
Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||
Status: | RESOLVED WORKSFORME | ||||||||
Severity: | Normal | CC: | bfulgham, mrobinson, simon.fraser, webkit-bug-importer, zalan | ||||||
Priority: | P2 | Keywords: | InRadar | ||||||
Version: | Safari Technology Preview | ||||||||
Hardware: | Unspecified | ||||||||
OS: | Unspecified | ||||||||
Attachments: |
|
Description
jonjohnjohnson
2018-09-05 16:03:22 PDT
In that this is about compatibility and not spec related, here are links to the same issue filed with other browsers. - https://bugs.chromium.org/p/chromium/issues/detail?id=881102 - https://bugzilla.mozilla.org/show_bug.cgi?id=1488950 Good luck finding agreement. Created attachment 348977 [details]
chrome canary (top), safari tech preview (middle), and firefox nightly (bottom)
Previous image didn't take into account webkit prefix of sticky property value.
The only major difference between webkit and gecko is at which point the sticky element reaches the opposite edge of its containing block as it scrolls all the way to the end. Safari "grabbing" the sticky element earlier. Blink decided to conform to gecko/webkit behavior for negative margin at the sticking scroll edge? So an updated version of the attached screenshot would show consistent behavior. https://bugs.chromium.org/p/chromium/issues/detail?id=814141#c_ts1524700607 But, Safari STILL has compat issues with how the sticky block is "picked up" (grabbed) when reaching the opposite edge of its containing block. Not sure about Edge, but Safari behaves different than blink/gecko in the test case where a 20 pixels or so before reaching the "scrollend" in the left side scroller, the sticky element begins moving with the flow content. As I spend time thinking about how SCR is created from scroll containers being the offset parent of the sticky element, I think the interop issue shown here is the same as what is reported in https://bugs.webkit.org/show_bug.cgi?id=175029 Checking against recent versions of WebKit, I think this is behaving the same way in all browsers now. Feel free to leave a comment if this is still an issue and I can reopen this and fix it. |