[Webkit-unassigned] [Bug 189324] New: [css-position][css-sticky] Negative margin, sibling element flow placement, containing block overflow compatibility between chrome/safari/firefox

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=189324

            Bug ID: 189324
           Summary: [css-position][css-sticky] Negative margin, sibling
                    element flow placement, containing block overflow
                    compatibility between chrome/safari/firefox
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: hi at jonjohnjohnson.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 348974

  --> https://bugs.webkit.org/attachment.cgi?id=348974&action=review

chrome canary (top), safari tech preview (middle), and firefox nightly (bottom)

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20180905/7a13cb73/attachment-0001.html>