madovation!

Booooo Inertia Scrolling

In an effort to make the scrolling experiences consistent with iPhones and iPads, Apple added inertia scrolling throughout OS X’s interface elements. You know, the rubber-banding feedback to indicate you’re at the edge of a page or list. While I welcome this in most places, I loathe this feature in the browser. Taking a cue form Safari in Lion, and in the spirit of unifying the behavior of WebKit browsers, Google soon adopted this in the latest versions of Chrome for OS X.

Most designers like myself have enjoyed having complete control of the web page canvas but now must deal with annoyances that come with inertia scrolling. When approaching a webpage boundary, that overused gray linen pattern pokes its head out—and in a lot of cases, disrupts the aesthetic of our interfaces. Most notably, fixed positioned page elements can get out of whack for a brief period. Things are a little bit disorienting for a bit for fixed backgrounds, too.

And in some strange cases, when elements are out of the viewport they become incorrectly rendered when the rubber-banding snaps back. The bug doesn’t occur 100% of the time, which is sort of odd. An example of this can be found in the CSS3 inner box shadow on tapviva’s top nav items:

Before scrolling to bottom edge of page (correct rendering):

After scrolling (wild behavior):
 

I expect that in the near future, we’re able to disable inertia scrolling via a meta tag property. Keeping my fingers crossed.

Edit: there’s a hack that involves disabling the CSS overflow of the body, and requires that you wrap everything in a div that has a y-overflow of auto.