{"issue":{"title":"Switch fixed toolbars to CSS position:fixed","user":{"login":"toddparker","id":359929,"url":"https://api.github.com/users/toddparker","avatar_url":"https://secure.gravatar.com/avatar/4ec3e17536d217f2367be3aebb72a72b?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","gravatar_id":"4ec3e17536d217f2367be3aebb72a72b"},"created_at":"2011-12-05T02:19:15Z","milestone":{"title":"1.1","creator":{"login":"Wilto","id":439942,"url":"https://api.github.com/users/Wilto","avatar_url":"https://secure.gravatar.com/avatar/36386473ee7de091db26bd82f8d18ca8?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","gravatar_id":"36386473ee7de091db26bd82f8d18ca8"},"created_at":"2011-11-14T21:13:04Z","open_issues":24,"state":"open","due_on":null,"closed_issues":2,"number":11,"description":"","url":"https://api.github.com/repos/jquery/jquery-mobile/milestones/11"},"labels":[{"name":"5 - Critical","url":"https://api.github.com/repos/jquery/jquery-mobile/labels/5+-+Critical","color":"d44a00"}],"state":"open","updated_at":"2011-12-24T22:12:01Z","id":2445049,"html_url":"https://github.com/jquery/jquery-mobile/issues/3216","pull_request":{"patch_url":null,"html_url":null,"diff_url":null},"closed_at":null,"body":"Issue #1792 was originally opened to move away from the dynamically positioned (via JS) toolbars to use position:fixed but at the time, we decided to pursue the touchOverflow approach because it made fixed toolbars and smoother transitions happen, if only in iOS5 for now.\r\n\r\nBrad Frost recently did a fresh batch of testing and re-thinking the use of native position:fixed is warranted because not only does it give us \"true\" fixed toolbars with minimal code, it is surprisingly well supported and mostly falls back to inline positioning. The worst case scenario is that in some browsers (BB6, Android 2.1), the toolbars scroll with the page before re-positioning themselves but this isn't much different than our current JS-based solution.\r\n\r\nBrad's results:\r\nhttp://bradfrostweb.com/blog/mobile/fixed-position/\r\n\r\nOur testing of his pages for both position:fixed and overflow:\r\nhttps://github.com/jquery/jquery-mobile/wiki/Position:fixed-and-Overflow:-testing\r\n\r\nNative overflow is more difficult to use for two reasons: on some browsers, overflow content is clipped off and inaccessible or requires a two finger scroll, and even when it works, performance can be slow.\r\n\r\nIf we switch to using position:fixed, we would need to disable user zoom to make this kick in for Android. It also makes it a bit easier to use across the board because it's easy to get into odd zoom scenarios where the fixed toolbars take up the whole screen and other usability issues. This is a case where the tradeoffs seems acceptable *if* you opt into fixed toolbars.\r\n\r\nWe expect to have true fixed toolbars working on following platforms:\r\n- iOS 5\r\n- Android 2.2, 2.3, 3.0 (honeycomb), 4.0 (Ice cream sandwich)\r\n- Blackberry 7 (BB6 re-positions fixed after scroll stops, like our JS solution)\r\n- PlayBook\r\n- Firefox mobile 6\r\n- WebOS 2+\r\n- Kindle Fire\r\n- Kindle 3\r\n- Nook Color 1 & 2 (tablet)\r\n- All modern desktop browsers (Safari, Firefox, Opera, Chrome, IE, etc.)\r\n\r\nMost other platforms will simply fall back to inline positioning. There are a few platforms that may half-support this feature and may incorrectly position the toolbars so we'll need to keep an eye out to see if we need to manually exclude these if they aren't usable:\r\n- Android 2.1\r\n- Blackberry 5\r\n- Opera Mobile\r\n\r\n\r\nA few technical things to keep in mind:\r\n\r\n- Since the fixed toolbars will be absolutely positioned, we need to account for the height of the toolbars and add equivalent top/bottom margins on the content area to keep the content from being obscured by the toolbars in normal fixed mode (fullscreen mode does this intentionally).\r\n\r\n- We might also want to set a minimum screen height to use this feature because some Blackberries have small screens and toolbars could take up more that 50% of the height. If could be a simple rule that we don't active this unless the total height of fixed headers and footers are less than % of the height.\r\n\r\n- We will also keep the option to tap the screen to switch between fixed and inline toolbars, like the current fixed demo illustrates. Fullscreen toolbars actually tap to hide/show the toolbars.\r\n\r\n- We might want to add in an option to either show by default, hide by default or show initially but hide after X seconds.\r\n\r\n","number":3216,"url":"https://api.github.com/repos/jquery/jquery-mobile/issues/3216","comments":23,"assignee":{"login":"scottjehl","id":214783,"url":"https://api.github.com/users/scottjehl","avatar_url":"https://secure.gravatar.com/avatar/4137f7daffde77fce06a26a1ac92f9bf?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","gravatar_id":"4137f7daffde77fce06a26a1ac92f9bf"}},"comment":{"user":{"login":"rbdrbd","id":951951,"url":"https://api.github.com/users/rbdrbd","avatar_url":"https://secure.gravatar.com/avatar/390b12d9ca9ccb4dd9750f4841ba0bf3?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","gravatar_id":"390b12d9ca9ccb4dd9750f4841ba0bf3"},"created_at":"2011-12-24T22:12:00Z","updated_at":"2011-12-24T22:12:00Z","id":3269248,"body":"Hey guys, looking forward to true fixed toolbars under iOS 5, et al, however both the current css-fixed branch with my app and the demo at http://filamentgroup.com/tests/jqm-nativefixed/ (fixed toolbars page, obviously) do not gracefully degrade on my iPhone 4 running iOS 4.3.1. I am seeing the footer all the way down at the bottom of the page, not 'hovering' like the current JQM mainline behavior ...just wanted to make sure you know about this. I can provide more info/screenshots as necessary.\r\n\r\n(I was going to go with the css-fixed branch and manually port over the fix from pull request #3050 for the degraded toolbar code, but I noticed all that logic was gone, as Todd said above.)","url":"https://api.github.com/repos/jquery/jquery-mobile/issues/comments/3269248"},"action":"created"}