Skip to content
This repository

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 Zoom - Works well

Overflow, Zoom - Content clipped

Overflow, no Zoom - Content clipped

Blackberry 5

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.

Blackberry 6

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

Blackberry 7

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

Playbook 1.0

Fixed, Zoom - Fixed headers work well

Fixed, no Zoom - Fixed headers work well

Overflow, Zoom - Scrolling works smoothly

Overflow, no Zoom - Scrolling works smoothly

Nokia N9 (MeeGo)

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

WP7

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

WP7.5 (Mango)

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

Android 2.1

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

Android 2.2

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

Android 2.3

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

Android 3.1 - Honeycomb

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

iOS 5, iPad

Fixed, Zoom - Fixed headers work well

Fixed, no Zoom - Fixed headers work well

Overflow, Zoom - Scrolling works smoothly

Overflow, no Zoom - Scrolling works smoothly

iOS 4.3, iPad

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

iOS 3.2, iPad

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

HP TouchPad

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

WebOS 1.4

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

Meego 1.2

Fixed: not supported

Something went wrong with that request. Please try again.