mozilla/fireplace — pull request #731 by cvan (2014-10-17 02:48:23+00:00)
Title: [WIP] buttery-smooth nav (bug 1059002)

https://bugzilla.mozilla.org/show_bug.cgi?id=1059002#c18

this patch uses `overflow: scroll` for the mobile-width nav. using JS, it calculates the scrollbar height (`offsetHeight - clientHeight`) of the inner container (`.navbar`) and modifies the height of the parent (`.navbar-wrapper`) to hide the scrollbar. (on FxOS, iPhone, and Mac OS X with a trackpad, scrollbars are "hidden," but when a mouse is connected to Mac OS X, for example, scrollbars appear - and I'm sure Windows is clownshoes/unpredictable.)

this patch is in a broken state, but [__this test case__](http://jsbin.com/fariz/4/) worked fantastically on my Firefox OS devices. on Firefox desktop there are focus issues where you have to first click the nav and then scroll; otherwise, the browser assumes you want to scroll on `body`. I tried this like a year ago for something else, and from my tests (and my StackOverflow sleuthing), you cannot even force focus of an element that isn't an form field (and I couldn't figure out a hack to make a form field masquerade as a content area. (this is the same reason in you can't use flexbox to simulate position: fixed headers with scrollable content areas.)

# TODOs:

* investigate if [Apple's mobile horizontal hamburger nav](http://www.apple.com/) has the same focus issues on Firefox desktop at mobile size (when a mobile `User-Agent` is spoofed)
* for proper positioning, use flexbox stuff (uncomment the rules below)
* _avoid flex if we can because flex on anything before Firefox 28.0 is **probably** subpar, which means FxOS 1.1-1.3_
* fix up positioning everywhere (most of this can be achieved by just doing the flexbox stuff)