position:sticky-x or position:fixed-x

I think it's worth revisiting position:sticky now that it's seen a few
implementations.  The graphics speedup by not using a javascript event is
indeed significant.  At least in Safari it works very well for things like
sticky headers.

Going back to Mr. O'conners & Maciej comments in 2012 one of the first
reasons sticky was proposed, and indeed perhaps the most convincing use
case is headers on very long tables.  Unfortunately without a good way to
isolate axes row headers in tables don't stick in very wide tables with
left-right scrolling.

This type of scrolling based on Javascript and scroll events is possible
(e.g. http://handsontable.com/examples.html#fndtn-personal ) but even with
small data sets the lag of the headers is awful.  With large data sets, for
example a reservation application with 300 rows (rooms) and 700 columns
(calendar days for a couple of years) the table headers can easily misalign
with data during scrolling.  However maintaining graphics acceleration
using position:sticky (at least on the column headers) the table scrolls
smoothly, quickly and exactly aligned to its sticky headers, even with
larger data sets.

The obvious solution is to isolate axes a la position:sticky-x or
position:sticky-y or for both position:sticky, this would give the designer
all the tools to build large accelerated tables with very useful sticky
headers.  There is some precedent for separating the axes in css
properties, for example background-repeat: repeat-y;

Given that there's been some resistance to implementing sticky, another
option would be to allow position:fixed-x or position:fixed-y.  This has
the advantage of not clobbering webkit's simple sticky implementation and
would still allow for graphics accelerated scrolling with of large tables
with apparently sticky headers on both axes.  Javascript and scroll events
could still be used for dynamic layout and while the css position state
would still lag with the event system as soon as the position changed to
either fixed-x or fixed-y graphics acceleration would be possible.
Moreover this would be useful even without dynamic layout and is not
mutually exclusive with :sticky.

There are many useful cases for position:sticky and we can't ignore the
vast improvement in speed and behavior we get by excluding the event model
but until now there's no implementation that accounts for the oldest and
most important use case, which is not a design element or a navigation aid
but the simple labeling of table data in large scrolling datasets.

Received on Monday, 24 August 2015 12:09:43 UTC