- From: Ed <edified@gmail.com>
- Date: Sun, 23 Aug 2015 20:14:11 -0700
- To: www-style@w3.org
- Message-ID: <CAG7AFJEpOtQy4fof+0WidQpAx6jerd_QTpvZXsGQq_w87E5OWg@mail.gmail.com>
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