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

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.