[css-position] Sticky positioning computations

I'm happy to see position:sticky in a recent ED of Positioned Layout
[1]. However, I don't think the algorithm using a "sticky-constraint
rectangle" accurately describes sticky positioning as outlined in my
previous draft text [2], and as I understand the Webkit and Gecko
implementations. The current issues 2 and 3 hint at this.

The containing block and scrolling box influence sticky positioning
differently in that one creates a stronger constraint than the other, so
taking the intersection of two rectangles to create the
sticky-constraint rectangle isn't sufficient. Step 3 (and 4, 5, 6
similarly) of the algorithm should read something closer to:

"If the stickily positioned element's 'top' style is not 'auto', and the
top of the stickily positioned element is above the top of the scrolling
container, the stickily positioned element is moved down until its top
is at the top of the scrolling container, or its bottom is at or below
the bottom of the containing block."

Notice that the bottom of the scroll container isn't taken into account,
nor is the top of the containing block. So top-sticky elements can
certainly extend past the bottom of the scroll container (and those that
are taller than their containing block simply won't ever move at all).

Gecko's implementation does use two rectangles based respectively on the
scroll container and containing block.



[1] http://dev.w3.org/csswg/css-position/#sticky-positioning
[2] http://lists.w3.org/Archives/Public/www-style/2013Jul/0337.html

Received on Wednesday, 27 November 2013 07:09:04 UTC