Summary: | position: sticky shouldn't create a stacking context | ||
---|---|---|---|
Product: | WebKit | Reporter: | Robert Flack <flackr> |
Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
Status: | NEW --- | ||
Severity: | Normal | CC: | bfulgham, cigitia, emilio, simon.fraser, zalan |
Priority: | P2 | ||
Version: | Safari 9 | ||
Hardware: | Unspecified | ||
OS: | Unspecified |
Description
Robert Flack
2017-02-22 07:51:56 PST
I think it's better to match position:fixed here, since sticky has fixed-like behavior part of the time. https://drafts.csswg.org/css-position-3/#position-property needs to be updated to say this. @smfr: Did safari regress something here? data:text/html,<meta charset=utf8><h1 style="position: sticky; top: 0;background-color:tomato; text-align: center;">Hello</h1><main style="height: 200vh;"><button>Plain, under</button><button style="opacity: 0.6;">Translucid, overlaps</button></main> Seems to not behave the same as: data:text/html,<meta charset=utf8><h1 style="position: fixed; width: 100% top: 0;background-color:tomato; text-align: center;">Hello</h1><main style="height: 200vh;"><button>Plain, under</button><button style="opacity: 0.6;">Translucid, overlaps</button></main> in Safari, but it does in Gecko and Blink. Looks like we have an overlap-testing bug where "Translucid" fails to z-order on top o the sticky if you scroll (it gets fixed if you resize the window when it's on top). |