Position:fixed and Overflow: testing
Details: http://bradfrostweb.com/blog/mobile/fixed-position/
Test page: http://bradfrostweb.com/demo/fixed/index.html
Short answer: position:fixed is pretty well supported, falls back to inline and is only a tad buggy on some browsers. Even the buggy platforms are roughly equivalent to our dynamically positioned script.
I'd recommend that we look into deprecating the script-based approach and use CSS only for 1.1 though we could offer the dynamic re-position as an optional polyfill for iOS 3-4. We'd need to disable zoom for Android support, but that is probably an ok tradeoff. This may not need to be qualified by support tests since it degrades so well.
Overflow is not ready for primetime but does work well on iOS5, Honeycomb and Playbook 1 (a bit slow).
Fixed, Zoom - Falls back to inline headers
Fixed, no Zoom - Works well
Overflow, Zoom - Content clipped
Overflow, no Zoom - Content clipped
Fixed, Zoom - Not truly fixed. Re-positions itself frequently, leading to a jitter as you scroll. Not broken, but sort of ugly.
Fixed, no Zoom - Not truly fixed. Re-positions itself frequently, leading to a jitter as you scroll. Not broken, but sort of ugly.
Overflow, Zoom - Scrollbars appear around region that doen't appear operable with touch. Broken.
Overflow, no Zoom - Scrollbars appear around region that doen't appear operable with touch. Broken.
Fixed, Zoom - Fixed headers sort of work. They scroll out of view, then re-appear when scrolling stops. When scrolling up, they look like they get stuck in the middle of the page during scroll, then re-position. This is probably the worst case scenario.
Fixed, no Zoom - Fixed headers sort of work. They scroll out of view, then re-appear when scrolling stops. When scrolling up, they look like they get stuck in the middle of the page during scroll, then re-position. This is probably the worst case scenario.
Overflow, Zoom - Scrolls w/o momentum so feels odd
Overflow, no Zoom - Scrolls w/o momentum so feels odd
Fixed, Zoom - Fixed headers work well, header shifts by ~5px at bottom of page
Fixed, no Zoom - Fixed headers work well, header shifts by ~5px at bottom of page
Overflow, Zoom - Works, but adds ugly h/v scrollbars that are very hard to use
Overflow, no Zoom - Works, but adds ugly h/v scrollbars that are very hard to use
Fixed, Zoom - Fixed headers work well
Fixed, no Zoom - Fixed headers work well
Overflow, Zoom - Scrolling works smoothly
Overflow, no Zoom - Scrolling works smoothly
Fixed, Zoom - Falls back to inline headers
Fixed, no Zoom - Falls back to inline headers
Overflow, Zoom - Content clipped, two-finger scroll w/o momentum
Overflow, no Zoom - Content clipped, two-finger scroll w/o momentum
Fixed, Zoom - Falls back to inline headers
Fixed, no Zoom - Falls back to inline headers
Overflow, Zoom - Scrolling works, but ugly h/v scrollbars appear, parent scrolls if you scroll before scroll stops
Overflow, no Zoom - Scrolling works, but ugly h/v scrollbars appear, parent scrolls if you scroll before scroll stops
Fixed, Zoom - Falls back to inline headers
Fixed, no Zoom - Falls back to inline headers
Overflow, Zoom - Scrolling works, but no momentum
Overflow, no Zoom - Scrolling works, but no momentum
Fixed, Zoom - Falls back to inline headers
Fixed, no Zoom - Falls back to inline headers
Overflow, Zoom - Content clipped, can't scroll
Overflow, no Zoom - Content clipped, can't scroll
Fixed, Zoom - Falls back to inline headers
Fixed, no Zoom - Fixed headers work well
Overflow, Zoom - Content clipped, can't scroll
Overflow, no Zoom - Content clipped, can't scroll
Fixed, Zoom - Falls back to headers inline
Fixed, no Zoom - Fixed headers work well
Overflow, Zoom - Content clipped, can't scroll
Overflow, no Zoom - Content clipped, can't scroll
Fixed, Zoom - Fixed headers work well, but 1px line jitter above the toolbar when scrolling
Fixed, no Zoom - Fixed headers work well, but 1px line jitter above the toolbar when scrolling
Overflow, Zoom - Scrolling works smoothly
Overflow, no Zoom - Scrolling works smoothly
Fixed, Zoom - Fixed headers work well
Fixed, no Zoom - Fixed headers work well
Overflow, Zoom - Scrolling works smoothly
Overflow, no Zoom - Scrolling works smoothly
Fixed, Zoom - Falls back to inline headers
Fixed, no Zoom - Falls back to inline headers
Overflow, Zoom - Content clipped, two-finger scroll w/o momentum
Overflow, no Zoom - Content clipped, two-finger scroll w/o momentum
Fixed, Zoom - Falls back to inline headers
Fixed, no Zoom - Falls back to inline headers
Overflow, Zoom - Content clipped, two-finger scroll w/o momentum
Overflow, no Zoom - Content clipped, two-finger scroll w/o momentum
Fixed, Zoom - Fixed headers animate into place while scrolling, looks janky
Fixed, no Zoom - Fixed headers animate into place while scrolling, looks janky
Overflow, Zoom - Scrolling works, but no momentum
Overflow, no Zoom - Scrolling works, but no momentum
Fixed, Zoom - Fixed headers animate into place while scrolling, looks janky
Fixed, no Zoom - Fixed headers animate into place while scrolling, looks janky
Overflow, Zoom - Scrolling works, but no momentum
Overflow, no Zoom - Scrolling works, but no momentum
Fixed: not supported