jQuery mobile fixed footer, iOS web view, and scrollTop issue

Question

I have a mobile application running Backbone.js and jQuery mobile. Because I have Backbone.js and for performance reasons I have disabled all the JQM routing and transitions. I understand that storing scroll location is a feature available in JQM, but I am unable to utilize that (as far as I know).

I have a list view with a potentially long list of items. When the user taps one on the mobile device, it stores the current scroll position and renders a new view. When the user taps the "back" button, it goes back one in the history.

clickLink: ->
    window.lastScroll = $(window).scrollTop()

render: ->
    ...

    if window.lastScroll
        $.mobile.silentScroll window.lastScroll
        window.lastScroll = undefined

This works as desired on desktop Safari, but when I try it using it on iOS Safari (both simulator and the real thing), there is an issue with the fixed footer navbar.

If the user taps back, the listview is scrolled down as intended, but then if they tap the footer navbar, it is as if they tapped under it, whatever list item is under it will be activated instead. If the user scrolls a little bit before tapping the navbar, everything works fine.

Does anyone have any ideas? Perhaps there is a better approach that would avoid this issue all together.

Thanks in advance for the help.

This workaround by Chad Smith worked the best for me: http://stackoverflow.com/questions/8752220/mobile-safari-bug-on-fixed-positioned-button-after-scrolltop-programmatically-ch — MysteriousFist, May 15 '12 at 14:22

score 0 · Answer 1 · answered May 15 '12 at 11:03

0

Could it be related to this bug?

Form elements can lose click hit area in position: fixed containers

(linked from here JQuery Mobile 1.1.0 docs )

I see there is a workaround in the first link - worth a try?

answered May 15 '12 at 11:03

JeffAtStepUp

405
3
7

score 0 · Accepted Answer · edited May 23 '17 at 12:27

Chad Smith Answered this Mobile Safari bug on fixed positioned button after scrollTop programmatically changed...?

His method worked best for me. Here is his response:

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.

jQuery mobile fixed footer, iOS web view, and scrollTop issue

2 Answers2

Linked