Fixed positioning in Mobile Safari

Question

Is it possible to position an element fixed relative to the viewport in Mobile Safari? As many have noted, position: fixed doesn't work, but Gmail just came out with a solution that almost is what I want – see the floating menu bar on the message view.

Getting real-time scroll events in JavaScript would also be a reasonable solution.

Eritrea

Answer 1

iOS 5 has support for position:fixed.

Teacart

Saw that this morning. Finally! – Eritrea

What about other mobile devices not on iOS? – Iormina

@danwellman, I believe browser is called Mobile Safari in iOS only. – Teacart

Why is this the accepted answer? There are still many users on lower versions of iOS fore one reason because of the missing support for there device.. – Sclaff

@Sclaff - because it works for iOS 5, we expect users to throw their old devices in the bin, something you have to do with Apple as most software doesn't work on older phones. – Suiter

If you use position:fixed as of IOS 5.1.1 (or earlier), you're likely in for a world of pain. It's buggy. Very buggy. – Crap

I've found this css-tricks.com/forums/discussion/17406/… – Leg

Answer 2

This fixed position div can be achieved in just 2 lines of code which moves the div on scroll to the bottom of the page.

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top =
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};

Linseylinseywoolsey

Doesn't this present a bit of a delay? – Eleen

onscroll isn't fired until after the scrolling is completed, so the element would scroll with the page and then snap to the bottom when scrolling is done. – Osmond

To add to this, mobile Safari now supports hardware accelerated transforms. So element.style.webkitTransform = "translate3d(0, " + window.pageYOffset + "px, 0)"; will actually execute faster and less choppy than setting the top value. – Cosgrove

@Adam: Don't know why but that didn't worked for me. The element doesn't showed up at all. Before it had position:fixed;top:50%;left:50%;. – Dexterdexterity

Answer 3

See Google's solution to this problem. You basically have to scroll content yourself using JavaScript. Sencha Touch also provides a library for getting this behavior in a very performant manor.

Fetch

Link is outdated. Try web.archive.org/web/20141001100814/https://… – Kelcey

Answer 4

it worked for me:

function changeFooterPosition() {   
  $('.footer-menu').css('top', window.innerHeight + window.scrollY - 44 + "px");
}

$(document).bind('scroll', function() {
  changeFooterPosition();
});

(44 is the height of my bar)

Although the bar only moves at the end of the scroll...

Seldom

Answer 5

This may interest you. It's Apple Dev support page.
http://developer.apple.com/library/ios/#technotes/tn2010/tn2262/

Read the point "4. Modify code that relies on CSS fixed positioning" and you will find out that there is very good reason why Apple made the conscious decision to handle fixed position as static.

Alodium

deep link: developer.apple.com/library/ios/#technotes/tn2010/tn2262/#//… – Schematism

There's no "very good reason" given at that link. All that is attempted is a description of the current situation. – Virgo

Answer 6

I think gmail just tracks the scroll position on a timer and repositions a div accordingly.

The best solution I've seen is at doctyper.

A simpler jQuery solution that moves an element onscroll: link

Hak

How do you get the scroll position, then? – Eritrea

I've added the simpler method that tracks onscroll. Feel free to dig through jQuery to find the exact method to use; it might be window.pageYOffset but I'm not certain – Hak

The Problem with doctyper is that the phone responsiveness starts to lag when there is too much content to scroll ... – Immemorial

Answer 7

You could try using touch-scroll, a jQuery plugin that mimics scrolling with fixed elements on mobile Safari: https://github.com/neave/touch-scroll

View an example with your iOS device at http://neave.github.com/touch-scroll/

Or an alternative is iScroll: http://cubiq.org/iscroll

Fantail

I used both. Both work well. iScroll 4 is more thorough if you need more than just scroll control (ie fixed positioning.) Touch Scroll is limited and smaller. – Littleton

Answer 8

This is how i did it. I have a nav block that is below the header once you scroll the page down it 'sticks' to the top of the window. If you scroll back to top, nav goes back in it's place I use position:fixed in CSS for non mobile platforms and iOS5. Other Mobile versions do have that 'lag' until screen stops scrolling before it's set.

// css
#sticky.stick {
    width:100%;
    height:50px;
    position: fixed;
    top: 0;
    z-index: 1;
}

// jquery 
//sticky nav
    function sticky_relocate() {
      var window_top = $(window).scrollTop();
      var div_top = $('#sticky-anchor').offset().top;

      if (window_top > div_top)
        $('#sticky').addClass('stick');
      else
        $('#sticky').removeClass('stick');
     }

$(window).scroll(function(event){

    // sticky nav css NON mobile way
       sticky_relocate();

       var st = $(this).scrollTop();

    // sticky nav iPhone android mobile way iOS<5

       if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) {
            //do nothing uses sticky_relocate() css
       } else if ( navigator.userAgent.match(/(iPod|iPhone|iPad)/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) ) {

            var window_top = $(window).scrollTop();
            var div_top = $('#sticky-anchor').offset().top;

            if (window_top > div_top) {
                $('#sticky').css({'top' : st  , 'position' : 'absolute' });
            } else {
                $('#sticky').css({'top' : 'auto' });
            }
        };

Subinfeudation

Answer 9

<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 

Also making sure height=device-height is not present in this meta tag helps prevent additional footer padding that normally would not exist on the page. The menubar height adds to the viewport height causing a fixed background to become scrollable.

Chauncey

Answer 10

Here you can see what (mobile) browsers support css position fixed + there version.

http://caniuse.com/css-fixed

Renaldorenard

Answer 11

Our web app requires a fixed header. We are fortunate in that we only have to support the latest browsers, but Safari's behavior in this area caused us a real problem.

The best fix, as others have pointed out, is to write our own scrolling code. However, we can't justify that effort to fix a problem that occurs only on iOS. It makes more sense to hope that Apple may fix this problem, especially since, as QuirksMode suggests, Apple now stands alone in their interpretation of "position:fixed".

http://www.quirksmode.org/blog/archives/2013/12/position_fixed_1.html

What worked for us is to toggle between "position:fixed" and "position:absolute" depending on whether the user has zoomed. This replaces our "floating" header with predictable behavior, which is important for usability. When zoomed, the behavior is not what we want, but the user can easily work around this by reversing the zoom.

// On iOS, "position: fixed;" is not supported when zoomed, so toggle "position: absolute;".
header = document.createElement( "HEADER" );
document.body.appendChild( header );
if( navigator.userAgent.match( /iPad/i ) || navigator.userAgent.match( /iPhone/i )) {
    addEventListener( document.body, function( event ) {
        var zoomLevel = (( Math.abs( window.orientation ) === 90 ) ? screen.height : screen.width ) / window.innerWidth;
        header.style.position = ( zoomLevel > 1 ) ? "absolute" : "fixed";
    });
}

Paoting