Fix: Mobile Bounce Behaviour

[andria-dev]

Fixes the problem of scrolling past edge of screen on mobile causing bounce behaviour

This should fix the the above mentioned problem by disallowing scrolling past the edge of the screen via the meta tag in public/index.html

If the problem exists elsewhere the same fix should be applied there as well.

[bvaughn]

This doesn't seem to have any impact on the built application. Scrolling-past/bouncing still happens for me.

[andria-dev]

@bvaughn Are you on the index page? If you're not on that page then you will need to include this meta tag change on those pages, I am unsure of where you keep all of your pages.

[bvaughn]

There is only one index.HTML template that is used to generate the site. I'm not sure I understand the comment.

[MikeTheCanuck]

I think what @ChrisBrownie55 is trying to say is that if there's some other page that's hosting the content you're viewing, where those meta tags aren't actually being applied, then that could account for the missing effect. However, since there is only one index.html hosting the SPA, I also believe the tags are being implemented.

I've tried testing it myself as well and I don't see it changing any obvious behaviour - according to this article these meta tags will disable user zooming (which I can still do) and I'm still able to get the page to "bounce" at the bottom.

However, I'm wondering if we're all thinking of the same behaviour. @bvaughn, are you interested in overriding the longstanding behaviour on iPhones that provides the "rubber-banding" effect when the user scrolls to the bottom of the page (i.e. if I'm scrolling down by swiping up, and I hit bottom, then I can swipe up a little further - but as soon as I let go, the page recedes back down a small amount)?

I'm personally puzzled why that behaviour should be disabled - I've found it a very useful usability cue as a user, when the flat design of pages and apps provides no visual cues that I've hit the bottom of the page/screen.

[bvaughn]

I think what @ChrisBrownie55 is trying to say is that if there's some other page that's hosting the content you're viewing, where those meta tags aren't actually being applied, then that could account for the missing effect. However, since there is only one index.html hosting the SPA, I also believe the tags are being implemented.

Yes, I also assumed that to be what he was saying. But as I pointed out, there is only this single HTML file.

@bvaughn, are you interested in overriding the longstanding behaviour on iPhones that provides the "rubber-banding" effect when the user scrolls to the bottom of the page (i.e. if I'm scrolling down by swiping up, and I hit bottom, then I can swipe up a little further - but as soon as I let go, the page recedes back down a small amount)?

Yes. This web-app does not support reloading after such a gesture, so it's not really that useful. And when this app is saved to the home page, (which is how I use it), the rubber-band-overscrolling is distracting. Makes it feel less native.

[bvaughn]

Closing (for now) due to inactivity. Happy to pick back up this conversation in the future though!