Profile

Cover photo
Jake Archibald
Works at Google
Attended University of Teesside
4,812 followers|411,269 views
AboutPostsPhotosYouTubeReviews

Stream

 
 
I'd like to soapbox about the need for rationality in the web platform, using position:sticky as a guinea-pig to explain my perspective.

The thing that bugs me about position:sticky is that is entangled with the magical nature of scrolling on the web. Per spec, the browser can scroll the page up and down without telling JS: you get a scroll event, but it happens after the scroll has actually happened.

Wat.

Here's the thing: this ability in browsers is super important, because scrolling is super duper important to get right for users. Without it, going to espn.com and scrolling is a really horrible user experience. On mobile, that poor site janks for a half second while it loads. I NEED MY SPORTS SCORES TO SCROLL AT 60FPS. The browser works around this by making scroll asynchronous. A simpler example is this: http://jankfree.org/examples/simple_jank.html : on mobile browsers, this scrolls smoothly, even though in devtools you'll see that the page is a cataclysm of jank.

Unfortunately, we've painted ourselves into a corner here, with regard to position:sticky and all other scroll coupled effects. If you try to polyfill sticky positioning, you get jitter. Typically, the user's scroll is immediately handled by the browser, drawn to the screen as fast as possible so it feels responsive. THEN the browser tells JS about it. The polyfill thus hears about the onscroll too late: it valiantly tries to update the sticky position, but the page has been sent to the screen with the movement already applied, so the user perceives a little jump in the next frame as the polyfill's reaction finally makes it onscreen. Designers get cranky, and you don't get to go to space.

Because of this, we have a promulgation of urgent-for-some spec needs: anytime a user wants a scroll-coupled effect, they need need new spec. That gets scary quickly, because lets face it, there's a ton of cool stuff you an do in response to scroll. We articulated this concern once for snap points, here: http://lists.w3.org/Archives/Public/www-style/2014Feb/0769.html 

Sticky positioning is in this space too. A common misconception is that position:sticky is an easily speccable, ready to go, kind of thing. In reality, there many many many variations on position:sticky-ish behavior out there for every simple use case, so speccing it is all about compromises and generalization. Even if we implement a common form of position:sticky, there will be corner cases we don't implement. Want your element to sing a sea shanty and then shrink to scale(0) as it falls offscreen? Sorry, please wait for Level 2 version, tentatively titled "position: even-more-sticky."

So, what to do?

As some might recall, +Dimitri Glazkov wrote a great essay on our need for a rational web platform a while back (https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/4jBAnIVwrt0). In it, he points out that we must first and foremost "explain the magic" behind our browser.

I submit that much of the sticky positioning debacle is fallout from the browser being magical about scroll. First and foremost, in this space, we need to explain the magic to the page: that way when the magic isn't quite right, you can get around it to do things your way.

What form should this particular fix to the magic take? Not sure, yet! Maybe we need to explain browser-side scrolling using some new APIs. Or maybe we need to allow content to opt-out of this magic. +Rick Byers has some much more formed ideas on how this might be done.

Important for me is embracing the idea of layering and accidental magic, recognizing that the lack of layering can take a basic feature request and turn it into a much bigger problem.

Consider: if we had a web that had an opt-out for magical scrolling, then we'd have plenty of content out there today doing position:sticky effects. Sure, there'd be the odd incurably janky page out there that wanted sticky, too. And there'd be people asking for sticky effects to be easier to author.

Both are great feature requests. With the immediate "I CANT IMPLEMENT THIS" fires resolved, we can then work through those goals at a normal and healthy web platform pace.

So, here's to identifying layers in the web platform, and fixing the bugs that cause layering to go wonky. And, here's to picking a subset of the most commonly occurring cases on the web and making those easy (https://code.google.com/p/chromium/issues/detail?id=231752).
5
1
Michael-Rainabba Richardson's profile photo
 
Wisdom applicable to nearly any open platform (though few are as relevant as the web).
Add a comment...

Jake Archibald

Shared publicly  - 
 
Something that caught me out when I first started using promises: reject() is not the opposite of resolve()
10
4
Derek Pennycuff's profile photoAli Mehran Rokni's profile photo
Add a comment...

Jake Archibald

Shared publicly  - 
 
 
Evergreen (aka, auto-updating) browsers ftw! ... One of the most beautiful chart I've seen in a while. Source: http://bit.ly/L71Jjn
10
2
Michael-Rainabba Richardson's profile photobeyond tellerrand's profile photoMark Wallsgrove's profile photoMichał Gołębiowski's profile photo
4 comments
 
+Michael-Rainabba Richardson Rarely, but when it happens, it's sometimes really bad. Like this fonts issue that is very serious and has existed for months already. :/
Add a comment...
 
JavaScript now has native promises & DOM APIs are adopting them!

Here's how they work, including polyfill:
81
82
James Edwards's profile photoLuis Montes's profile photoorion fiveA's profile photoStephen Coakley's profile photo
70 comments
 
Oh sa-weet-ah!
Add a comment...
 
Listen for and intercept network requests in the browser to create offline sites. A look at the in-development ServiceWorker API.

Slides: https://speakerdeck.com/jaffathecake/network-optional
28
18
Ali Mehran Rokni's profile photoKashif Ansari's profile photo
Add a comment...
Have him in circles
4,812 people

Jake Archibald

Shared publicly  - 
 
ES7 async functions - They're brilliant. They're brilliant and want laws changed so I can marry them.
20
2
Gabor Orosz's profile photoDerek Pennycuff's profile photo
Add a comment...

Jake Archibald

Shared publicly  - 
 
Caching & content negotiation don't mix. The browser cache is Vary broken :(
12
4
Jan Philipp's profile photoAli Mehran Rokni's profile photo
Add a comment...

Jake Archibald

Shared publicly  - 
 
 
Udacity Mobile Web Development Course Now Live
Beginning today, you can learn how to apply your web development skills to build great mobile web apps with Mobile Web Development (CS256)—a new Udacity MOOC training course. Join us tomorrow (Tuesday, January 7th at 9:30 a.m. PST) for an introductory Google Developers Live session with the course instructors, +Chris Wilson +Sean Bennett and +Peter Lubbers and  special guest and Udacity CEO, +Sebastian Thrun. Ask and vote for questions at  bit.ly/udacitycs256gdl.
#udacitycs256  
8
4
Michael-Rainabba Richardson's profile photoMatt Smith's profile photo
Add a comment...

Jake Archibald

Shared publicly  - 
 
Dodd Fell
9
1
Matt Dragon's profile photoAddy Osmani's profile photo
 
First read this as "Jake Archibald : Did Fell". Now disappointed. Pretty pictures, though :D
Add a comment...

Jake Archibald

Shared publicly  - 
 
Every mobile browser adds a 300ms delay onto tap interactions. But it's gone in Chrome 32 (beta)! Here's why & how http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
24
17
Michał Gołębiowski's profile photoSven Hermesdorf's profile photo
Add a comment...
People
Have him in circles
4,812 people
Work
Occupation
Web Developer
Employment
  • Google
    Chrome Developer Relations, 2012 - present
  • Lanyrd
    Web Developer, 2011 - 2012
  • The Team
    Web Developer, 2010 - 2011
Basic Information
Gender
Male
Apps with Google+ Sign-in
Story
Tagline
Developer Advocate working at Google
Education
  • University of Teesside
    Multimedia, 2002 - 2006
  • Morton School, Carlisle
    1995 - 2002
Links
Contributor to
Fish & chips were fantastic. Nice to sit outside
Public - 8 months ago
reviewed 8 months ago
1 review
Map
Map
Map