[csswg-drafts] [css-position][css-sticky][css-om] unclear definition/use of containing block terminology and interop

jonjohnjohnson has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-position][css-sticky][css-om] unclear definition/use of containing block terminology and interop ==
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.
- Firefox/Chrome allowing consecutively nested sticky positioned elements to use to 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 a handful of bugs reported to each vendor because of the specs lack of clarity here.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2609 using your GitHub account

Received on Monday, 23 April 2018 18:36:00 UTC