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

I discovered the exact behavior you describe in an iPhone app I'm writing. I load a bunch of HTML text with an index on the right side. After selecting an item from the menu and scrolling the text, the menu would then become unresponsive (because the landing zone had scrolled out from under it). I also saw that even a tiny scroll of the text would reenable the index menu.

I created a test case and uploaded the file here (If you view this on a non-iPhone browser, make the window small vertically to see the correct behavior):

http://www.misterpeachy.com/index_test.html

I figured out that the index menu was scrolling with the text (even though the visible menu didn't move) after I tapped B and then tapped B again. Instead of scrolling to B (basically not moving), it scrolled to D.

Right now I'm stuck. I'm hoping that I can add some JavaScript code (I've never programmed in JavaScript, so that is a slight problem) that will scroll the text one pixel after I lift my finger off a menu item (and after the text has scrolled to the selected place, of course). Maybe JavaScript can detect the scroll and then add another scroll to that.

Answer 2

In case it can help someone:

I had the exact same problem, and my code looked something like this (it's a single-page webapp):

window.scrollTo(0,0);
$('section.current').removeClass('current');
$(target).addClass('current');

I spent hours trying everything (101% height divs, changing the position type...), but finally the last suggestion described on Device-Bugs saved the day. In my case it was just a matter of scrolling when the divs aren't rendered:

$('section.current').removeClass('current');
window.scrollTo(0,0);
$(target).addClass('current');

Answer 3

Another variation of a solution is to increase the size of the document width by 1px and then immediately undo it. This has the advantage of not creating any more elements and there isn't any flicker that I've experienced.

https://stackoverflow.com/a/11479118/43217

Answer 4

After spending a couple of hours on this, I found a workaround: try scrolling (maybe with an animation) and then scrolling again to the same point (without animation).
This way you force the browser to delete the wrong rendering from the view.

Example:

$('body, html')
    .animate({scrollTop: 0})
    .scrollTop(0);

Answer 5

I had multiple links on separate fixed elements (a modal popup + fixed blackout div + normal fixed toolbar) and none of these answers were working so I had a tinker about trying variations on the same theme. Like all these suggest the key is getting elements re-rendered.

Initially I tried adding 1px to the width of fixed elements and removing it. This did cause re-rendering, but re-rendered elements became mis-aligned with non re-rendered elements - another result of this iOS bug I suspect. The answer was to simply add to the width of the body and subtract again (or set to auto), ie:

//jQuery will calculate the current width and then +1 to this and set it
$('body').css('width', '+=1');

//Remove width css
setTimeout(function() {
  $('body').css('width', '');
}, 1);

If not using jquery you will need to get the current width of body +1px to it and then set the width.

Answer 6

A variation of this worked for me as well. Trying to not use frameworks where I can on mobile.

    var d = document.createElement("div");
    d.style.height = "101%";
    d.style.overflow = "hidden";
    document.body.appendChild(d);
    window.scrollTo(0, scrollToM);
    setTimeout(function() {
        d.parentNode.removeChild(d);
    }, 10);