Sticky positioning of tall elements with both top/bottom

I'm wondering about the intended behavior of a declaration such as

{ position: sticky; top: 10px; bottom: 10px; }

when the element is taller than its scrolling container's height minus 
20px (or the analogous scenario with width/left/right).

There was a bit of discussion about this last year:
http://lists.w3.org/Archives/Public/www-style/2012Jun/0678.html
> > * if top and bottom are both non-auto, and the element is taller 
> than the scrolling container (or if left and right are both non-auto, 
> and the element is wider than the scrolling container), then writing 
> direction gives precedence. Thus in English lrtb, left and top would 
> override right and bottom if both could not be satisfied simultaneously.
>
> Right, we need to determine behavior in this case.

The behavior of simply ignoring one of the two seems sensible.

However, that's not what I see in WebKit (latest nightly). The element 
appears to be bottom-sticky towards the top of the scrolling container 
and top-sticky towards the bottom. At the transition between these, 
there is the strange-feeling behavior that the element moves down the 
screen as I scroll the page down.

Test page: http://people.mozilla.org/~cford/test/sticky-tall.html

Is this behavior desirable, and if so, how could it be characterized?

Corey Ford

Received on Thursday, 27 June 2013 23:42:36 UTC