Fullpage.js: On mobile chrome, trying to scroll up causes page reload

[joshuaohana]

Description

iOS mobile Chrome browser.

I have a multi section page using fullPage.js, works perfect in every situation except mobile Chrome browser due to Chrome's "pull down to reload page" feature.

If you try to scroll up (by sliding finger down) it will reload to the page. If you play with it some you'll find that sliding fast will allow you to scroll normally, but if you slide in a more natural way like someone used to scrolling on a website, it'll "stick" at first then just reload the page, instead of sliding up to the next page.

It causing an exceedingly poor user experience as any time the user tries to scroll up they see that little chrome menu bar with the reload/close/back buttons.

Link to isolated reproduction with no external CSS / JS

https://fiddle.jshell.net/imac/kemtmm9a/embedded/result/
Issue presents itself more clearly without the jsfiddle header but you can definitely see what's going on here.

Steps to reproduce it

1. Go to any fullPage.js website on mobile chrome (ex; https://fiddle.jshell.net/imac/kemtmm9a/embedded/result/)
2. Scroll down off of first page
3. Slide your finger down (to scroll up)
4. Witness behavior of Chrome's pull-down-to-refresh functionality
   

   Versions

iPhone 6, Chrome
Any mobile os running Chrome browser

[alvarotrigo]

I'm not able to reproduce your issue.
Swiping up will go to the previous section unless I swipe over the address bar.

Could you record a video with your issue?
Can you reproduce it on the demo page?

[alvarotrigo]

Right... I was able to reproduce it now. Thanks for reporting it!
It seems Chrome tries to reload the website when swiping down (to go up) around the middle half area of the viewport.

I'll have to check it with time, meanwhile I would encourage you to use the responsiveWidth or responsiveHeight options for small viewport devices.

[joshuaohana]

Thanks, I really want to make it work as a fullPage site even on mobile so responsiveWidth/Height won't really work for me.

In testing this out with various solutions found online the root of the issue seems to stem from the fact that window.pageYOffset is always 0, regardless of where the user is on the page. This seems central to how fullPage.js operates which makes sense; however, Chrome detects for a scroll up when the window.pageYOffset=0 and enables the pull to refresh at that time.

[alvarotrigo]

Yeap. It doesn't sound like an easy thing to solve. Found this answer regarding it, but not quite sure if that would solve anything.
fullpage.js is already preventing the default touchMove event (to solve the issue in Safari iOS) and it seems Chrome doesn't care about it.

[alvarotrigo]

Also, it is interesting the fact that I couldn't reproduce the bug in this page which I used to test the issue.
Is Chrome only doing it with small width websites? This one is not using the viewport meta tag and its width is therefore bigger than the main fullpage.js page which is optimized for mobile devices with media queries.

[joshuaohana]

I am able to reproduce the issue normally with the link you provided (http://alvarotrigo.com/fullPage/prueba/examples/demoPage.html#about-info) same misbehavior as any other site. It works clearest if you try to scroll very slowly.

Seems the crux of the issue is the yOffset always being 0 in a fullPage.js site and Chrome's decision on what to do when that's the case, since it thinks it's at the top of the site...

I was able to preventDefault for all touchMoves, which works as written; however... this breaks all scrolling as it prevents fullPage from capturing the event. Maybe there's to tack that onto the end for touchmove (if going up, if not at top, do fullPage scroll up and then preventDefault)

[alvarotrigo]

Have you considering destroying fullpage.js for small screen devices and initializing it again with scrollBar:true and autoScrolling:true?
That would probably solve the issue while maintaining the autoScrolling that you want.

[alvarotrigo]

I was able to preventDefault for all touchMoves, which works as written;

fullpage.js is suppose to be doing that in any case. Check the code here in line 1148.

[joshuaohana]

Ah and so it should, odd. Oh well your solution with scrollBar:true and autoScrolling:true works like a charm!! Thanks so much

[alvarotrigo]

That way it might not work as smooth as when using css3 transformations, so feel free to just use it for Mobile Chrome or mobile devices in general in order to solve the Chrome issue.

[alvarotrigo]

@joshuaohana good news! The issue have been solved in the dev branch and will be merged into the next release.
It is related with this other issue regarding iOS 10 and has been solved by using preventDefault() not only on touchmove but also in touchstart.

[alvarotrigo]

Solved in 2.8.7

[AlexDushko]

Hi there. Thanks for your plugin!
I have the same problem.
FP version is 2.9.7
Testing on my phone(iphone 7+, latest IOS ver(Google chrome))
When swiping up on fullwidth form with inputs, the page goes to reload.

[amalic]

This issue is back and it is super annoying, since websites now have tons of pop-ups that needs to be clicked away.

[alvarotrigo]

@amalic I can not reproduce the issue in the demo page which uses fullpage.js 3.0.5.

Can you provide an isolated reproduction with no external CSS and JS to fullpage.js where we can reproduce the issue with fullPage.js 3.0.5?

[akarivs]

@amalic, @alvarotrigo
It could be a Chrome issue. I got the last update 3 days ago and every website is refreshing on slow swipe down. Facebook, Google Search Page, etc...

[science]

I'm experiencing this problem with Chrome latest on a Pixel 3. Sites will reload instead of scroll up randomly. I can't find a pattern but I can't think of a reason why scroll up action should reload unless I'm already at the top of the page.

This bug bit me while I was filling out a web form, causing me to lose my entered data in the form, for example.

If I can find steps to repro reliably I'll send an update. Right now it appears intermittently.

[alvarotrigo]

@science are you able to reproduce the issue in this page?

What device / browser / OS are you using?

[science]

It's intermittent so I'm not sure, but I don't think I haven't yet repro'ed on your test page. I'm on Android 9 / Pixel 3 / Chrome stock.

(Love your project by the way - we may license it a project we're starting)

[alvarotrigo]

@science let me know if you manage to reproduce it in that page or any other using fullPage.js 3.0.5!
And glad you like it! ;)