Yes, we've got solutions for each individual mobile device. JQuery Mobile continues to try and fix this within the confines of their framework, but it's too much whack-a-mole, with the constant updates from each device maker / OS maker. If I'm interpreting your question correctly, we've been having the same issue for years developing cross-platform mobile web apps, trying to get all the different proprietary scroll features to work correctly on each device: Apple iOS, Google Android, Windows Phone, laptop Chrome, laptop Safari, IE, and laptop Edge. I am guessing this is because the content (other than the footer) is always just large enough that the scroll is not needed, and so scrolling gets disabled and the footer no longer is accessible on scroll. I have the same issue always.when I try to disable the bounce, all scrolling gets disabled. I have tried various solutions, including iNoBounce.js, Nonbounce.js and a few other suggestions I have found on SO. The problem I am having is the same as the problem on the page in that when you scroll up, you get a bounce effect at the bottom of the screen and which reveals the background and overlay. When scrolling, the buttons and title all move up the screen to display the footer.

The content consistes of a title which is positioned 20px below the navbar and a series of buttons that are positioned 20px above the viewport.There is a footer element that loads off-canvas and is only visible on scrolling the content.The slideshow has an overlay that is fixed to the bottom of the viewport.It has a full-screen background slideshow.The basic structure is bootstrap-based.The page I am working on is quite specific in it's structure, and is very similar to this page I am trying to implement a solution to prevent the iOS bounce effect in Safari for iOS when a web page content is larger than the viewport.

Bounce touch up