search

davebalmer / jo

Jo (0.5.0) is a thin (~16K) candy shell for making HTML5 apps. Jo works with: PhoneGap, Chrome, Safari, Opera, FireFox, iOS, Android, BlackBerry 10, Tizen, & Windows Phone 8+. Features include skinnable UI widgets, a clean event model and a light data layer.
MIT License
1.2k stars 180 forks source link

(option?) use CSS position: fixed whenever possible for navigation bars #51

Open jokeyrhyme opened 12 years ago

jokeyrhyme commented 12 years ago

The scrolling area touch-event hack is necessary on iOS and Android<2.3, but many devices support CSS position: fixed.

In my own testing, web applications have much better performance characteristics for content in the scrolling pane. I've noticed that the web forms kitchen-sink widgets' animations are smoother when compared to the touch-event hacked technique.

This might be a solution to: https://github.com/davebalmer/jo/issues/22

davebalmer commented 12 years ago

Good point. This is doable today, but not automatic. Would be good to make this easier.

jokeyrhyme commented 12 years ago

According to this, CSS position: fixed support is undetectable: https://github.com/Modernizr/Modernizr/wiki/Undetectables

However, in the example for Modernizr.addTest(), they give example code that actually tends to work in a few browsers (although I've noticed it produced false-positives in iOS): http://www.modernizr.com/docs/#addtest

I'm using the example code with some hard coded user-agent sniffing, which is also what the Wink Toolkit does (although they have a slightly more interesting detection mechanism involving getBoundingClientRect).

jokeyrhyme commented 12 years ago

Oops, wrong button.

davebalmer commented 12 years ago

I use user-agent sniffing in my sample apps for this. In one of my apps, I use this to change to native scrolling:

// turn off flick based scrolling
if (!jo.matchPlatform("ios ipad iphone hpwos webos playbook android bada playbook")) {
    joDOM.loadCSS("css/browser.css");
    joScroller.prototype.onDown = function() {};
}

The browser.css file here just reverts back to overflow: auto for divs, but the same sort of approach could be used to also change from position: absolute to position: fixed for certain elements. This sort of thing is something I could see moving into the core library, but I want to do it cleanly.