[css-position][css-sticky][cssom] unclear definition/use of containing block terminology and interop #2609
Description
https://drafts.csswg.org/css-position-3/#sticky-pos
Though the spec first offers...
The containing block of a sticky element is the same as for a relative element.
This seems to be an oversimplification in light of how box offset values are later explained in relation to the sticky position scope.
Leading to interop issues like...
- When an elements nearest scrollable ancestor (scrollport) is also the element that establishes its containing block (nearest block level ancestor), Safari will use the scolling elements dimensions from clientHeight/clientWidth as a type of containing block (the same way all browsers implement absolute positioning in relation to that element as a containing block) for the creation of a "sticky constraint rectangle". But for Firefox/Chrome, dimensions from the scrolling elements scrollHeight/scrollWidth (scrollbox) are used instead.
- Chromes
display:inline-block"compounding" box offset bug as you scroll the structure from previous bullet. chromium/759284 - Firefox/Chrome allowing consecutively nested sticky positioned elements to use the outermost sticky elements containing block for descendants, though Safari adheres to use of nearest block level ancestor.
Not sure of Edges implementation in the cases described
I've noticed too many bugs reported to each vendor because of the specs lack of clarity here.