Mobile Safari bug on fixed positioned button after scrollTop programmatically changed…?

Question

I\'m just about done a webpage but there is one bug in Mobile Safari (iPhone and iPad iOS 5.0.1) with two buttons that are fixed to the upper and lower right corners..

Answer 1

Example code

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
    $(document).on('focus', 'input, textarea', function() {
        $('header').css({'position':'static'});
    });
    $(document).on('blur', 'input, textarea', function() {
        $('header').css({'position':'fixed'});
    });
}

Answer 2

I was having the same problem with iOS5 and JQueryMobile. Fixed Header & Footer. Expandable content and suddenly i had a ghost footer that you could see but not touch. I had a bit of a problem getting a straight change position to absolute then back to work. It seemed to only work some of the time. I ended up using this.

        $(myFixedFooter).css("position", "relative").hide(0, function () {
            $(this).show(0).css("position", "");
        });

This defiantly creates a "blip" as the footer does its thing. Hoever i found that some 98% of the time the footer stayed at the bottom of the page. All the other work arounds and tweaks i found and tried didn't always leave the footer at the bottom or they didn't solve the problem in the first place.

Hopefully Apple will fix soon.

Answer 3

I got around it by adding a 101% high div then (almost) immediately removing it.

Try:

<style>
.iosfix {
  height: 101%;
  overflow: hidden;
}
</style>

and when you scroll:

window.scrollTo(0, _NEW_SCROLLTOP_);
$('body').append($('<div></div>').addClass('iosfix'));
setTimeout(function() {
  $('.iosfix').remove();
}, 500);

It also works with jQuery.scrollTo.

See an example here.

Answer 4

We also encountered this bug on 2 different iPad applications, for us the best fix was to temporarily remove the fixed position from the fixed element once the animated scroll had finished, then use window.scroll with the vertical value we’d just performed the animated scroll to, then finally re-apply the position fixed style. It does cause a very minor blip as the ipad re-renders the element but its preferable to the bug.

var $fixedElement = $('#fixedNavigation');
var topScrollTarget = 300;
$("html:not(:animated),body:not(:animated)").stop().animate({ scrollTop: topScrollTarget }, 500, "swing", function(evt) {
    $fixedElement.css({ "position": "relative" });
    window.scroll(0, topScrollTarget );
    $fixedElement.css({ "position": "fixed" });
});

Answer 5

Here is my solution if like me, none of the previous solution is working for you.

The trick is:

• Do your scroll (Animate or scrollTo, etc.)
• Just after your scroll, position:absolute your fixed elements
• On the 'touchmove' event, restore the position:fixed

Here an example:

  $('body').animate({
       scrollTop: newPos}, 1000, 'jswing', function () {
          $('header').css({position:'absolute', top:newPos});
  });

  $(document).bind('touchmove',function(){
       $('header').css({position:'fixed', top:'0px'});
  });   

I used the same trick for sticky footer and other floating fixed elements.