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).

---

Kindle Fire

Fixed, Zoom - Falls back to inline headers

Fixed, no zoon - Works well

Overflow, Zoom - Content clipped

Overflow, no zoon - Content clipped

Blackberry 5

Fixed, Zoom - Falls back to inline headers Fixed, no zoon - Falls back to inline headers Overflow, Zoom - Scrolls w/o momentum Overflow, no zoon - Scrolls w/o momentum

Blackberry 6

Fixed, Zoom - Falls back to inline headers Fixed, no zoon - Falls back to inline headers Overflow, Zoom - Scrolls w/o momentum Overflow, no zoon - Scrolls w/o momentum

Blackberry 7

Fixed, Zoom - Fixed headers work well, header shifts by ~5px at bottom of page Fixed, no zoon - 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 zoon - Works, but adds ugly h/v scrollbars that are very hard to use

Playbook 1.0

Fixed, Zoom - Fixed headers work well Fixed, no zoon - Fixed headers work well Overflow, Zoom - Scrolling works smoothly Overflow, no zoon - Scrolling works smoothly

Nokia N9 (MeeGo)

Fixed, Zoom - Falls back to inline headers Fixed, no zoon - Falls back to inline headers Overflow, Zoom - Content clipped, two-finger scroll w/o momentum Overflow, no zoon - Content clipped, two-finger scroll w/o momentum

WP7

Fixed, Zoom - Falls back to inline headers Fixed, no zoon - 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 zoon - Scrolling works, but ugly h/v scrollbars appear, parent scrolls if you scroll before scroll stops

WP7.5 (Mango)

Fixed, Zoom - Falls back to inline headers Fixed, no zoon - Falls back to inline headers Overflow, Zoom - Scrolling works, but no momentum Overflow, no zoon - Scrolling works, but no momentum

Android 2.1

Fixed, Zoom - Falls back to inline headers Fixed, no zoon - Falls back to inline headers Overflow, Zoom - Content clipped, can't scroll Overflow, no zoon - Content clipped, can't scroll

Android 2.2

Fixed, Zoom - Falls back to inline headers Fixed, no zoon - Fixed headers work well Overflow, Zoom - Content clipped, can't scroll Overflow, no zoon - Content clipped, can't scroll

Android 2.3

Fixed, Zoom - Falls back to headers inline Fixed, no zoon - Fixed headers work well Overflow, Zoom - Content clipped, can't scroll Overflow, no zoon - Content clipped, can't scroll

Android 3.1 - Honeycomb

Fixed, Zoom - Fixed headers work well, but 1px line jitter above the toolbar when scrolling Fixed, no zoon - Fixed headers work well, but 1px line jitter above the toolbar when scrolling Overflow, Zoom - Scrolling works smoothly Overflow, no zoon - Scrolling works smoothly

iOS 5, iPad

Fixed, Zoom - Fixed headers work well Fixed, no zoon - Fixed headers work well Overflow, Zoom - Scrolling works smoothly Overflow, no zoon - Scrolling works smoothly

iOS 4.3, iPad

Fixed, Zoom - Falls back to inline headers Fixed, no zoon - Falls back to inline headers Overflow, Zoom - Content clipped, two-finger scroll w/o momentum Overflow, no zoon - Content clipped, two-finger scroll w/o momentum

iOS 3.2, iPad

Fixed, Zoom - Falls back to inline headers Fixed, no zoon - Falls back to inline headers Overflow, Zoom - Content clipped, two-finger scroll w/o momentum Overflow, no zoon - Content clipped, two-finger scroll w/o momentum

HP TouchPad

Fixed, Zoom - Fixed headers animate into place while scrolling, looks janky Fixed, no zoon - Fixed headers animate into place while scrolling, looks janky Overflow, Zoom - Scrolling works, but no momentum Overflow, no zoon - Scrolling works, but no momentum

WebOS 1.4

Fixed, Zoom - Fixed headers animate into place while scrolling, looks janky Fixed, no zoon - Fixed headers animate into place while scrolling, looks janky Overflow, Zoom - Scrolling works, but no momentum Overflow, no zoon - Scrolling works, but no momentum