search

alvarotrigo / fullPage.js

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
http://alvarotrigo.com/fullPage/
GNU General Public License v3.0
35.24k stars 7.31k forks source link

scrollBar:true causes iframe to escape autoscrolling #2693

Open ghost opened 7 years ago

ghost commented 7 years ago

When browsing on iOS, with iframes on the page and scrollBar:true, if the scroll originates from within the iframe (i.e. the touch to scroll begins there) the normal Fullpage scrolling mechanism (autoScrolling and fitToSection) seems to be avoided. Setting scrollBar:false works perfectly and as expected.

In a mobile device when scrollBar:true is enabled, scrolling from the iframe activates the browser's normal scrolling mechanism causing the address bar to hide, and after the bar is hidden, fullpage doesn't resize the section to fit the new height and so part of the next section appears at the bottom of the screen. Scrolling from anywhere else on the page doesn't cause the address bar to hide and so this problem doesn't appear.

This only happens with scrollBar:true. When it is set to false, if you try scrolling from the iframe only the section moves but springs back to its original place.

Is there a way to avoid this issue, without setting scrollBar:false?

Reproduced using by replacing the scrolling div with an iframe in the normalScrollElements.html example included in the project download. I had tried using codepen but it doesn't play well on my iOS devices. link here

Tested on various iPads with Chrome browser (latest). Can also be seen in Safari but the height of the bar that hides is not much so the issue is not that obvious.

alvarotrigo commented 7 years ago

Possible solved in the dev branch thanks to this pull request.

This will prevent the page to scroll when using normalScrollElements over the iframe.

ghost commented 7 years ago

Thanks for your reply. I've just tried the same example as above, but using the dev branch downloaded from https://github.com/alvarotrigo/fullPage.js/archive/dev.zip and added normalScrollElements: '#iframe-codepen' to the FP options but the problem still happens on iPad. Do I need to make any other changes?

link here

alvarotrigo commented 7 years ago

Thanks for your reply. I've just tried the same example as above, but using the dev branch downloaded from https://github.com/alvarotrigo/fullPage.js/archive/dev.zip

Make sure to use this exact file. None of the dist files in the dev branch are up to date.

alvarotrigo commented 7 years ago

Right. I see you are using it...

When browsing on iOS, with iframes on the page and scrollBar:true, if the scroll originates from within the iframe (i.e. the touch to scroll begins there) the normal Fullpage scrolling mechanism (autoScrolling and fitToSection) seems to be avoided.

I've fixed now the issue that was causing a bug in your example and forcing the normal scrolling of the site when is should be auto scrolling when touching outside the iframe.

In a mobile device when scrollBar:true is enabled, scrolling from the iframe activates the browser's normal scrolling mechanism causing the address bar to hide, and after the bar is hidden, fullpage doesn't resize the section to fit the new height and so part of the next section appears at the bottom of the screen. Scrolling from anywhere else on the page doesn't cause the address bar to hide and so this problem doesn't appear.

But the problem you mention regarding the hidding of the address bar and the showing of the next section stills there. Not something in which I'm planning to take action in the short term. Take a look at the proposed solution in this PR if you are interested in fixing it yourself.

alvarotrigo commented 7 years ago

I've fixed now another issue that was causing a bug in your example and forcing the normal scrolling of the site when is should be auto scrolling when touching outside the iframe.

Done in https://github.com/alvarotrigo/fullPage.js/commit/ed10ac5d746d8b3815cadfff12a59d1e96bcde1b

ghost commented 7 years ago

Thanks for your reply!

I've fixed now the issue that was causing a bug in your example and forcing the normal scrolling of the site when is should be auto scrolling when touching outside the iframe.

I hadn't noticed the bug when touching outside of the iframe. Auto Scrolling works for me if I touch from outside the iframe, but when I touch from inside the iframe the normal scrolling is used causing the problem. Is there a workaround to force autoscrolling to work when the scroll touch comes from inside the iframe? I see for other elements the normal scrolling is avoided and 'caught' by the auto scrolling so I'm wondering if I can do that with the iframe as well?

alvarotrigo commented 7 years ago

I see for other elements the normal scrolling is avoided and 'caught' by the auto scrolling so I'm wondering if I can do that with the iframe as well?

Sure. If you do not use the normalScrollElements, then scrolling over it won't have any different effect as scrolling anywhere else. The only problem with this is that you won't be able to scroll inside the iFrame if this one has scroll bar.

ghost commented 7 years ago

Sorry for the confusion. That's what this ticket is about. On iOS if you attempt to scroll with the touch starting from inside an iframe, the scroll is not 'caught' by FP.js but instead the browser's normal scrolling behaviour applies. I wanted to know if there was a way to force the scroll on iOS to use the FP.js scroll instead of the browser's scroll. I can send you a video but I don't want to publish it here - what's the best way?

alvarotrigo commented 7 years ago

I see! The easiest way might be just using a transparent DIV covering your iframe. I would go for that if that doesn't suppose you any problem.

ghost commented 7 years ago

I've tried a few approaches like that but I need to be able to click inside the iframe and couldn't get that to work without the scrolling problem.

alvarotrigo commented 7 years ago

Right. Not an easy solution then... I guess you could try to detect the touchstart and touchmove events inside the iframe and prevent the propagation up... but I haven't tried it myself.

scrollBar:true as you said its the easiest way. Or just using autoScrolling:false for small screen devices by using the responsiveWidth or responsiveHeight options.

ghost commented 7 years ago

I've tried that too but it's tricky as the iframes are on another domain I have no control over. I'm already using the responsive width and height options for iPhone-sized iOS devices. It's mainly the ipad-sized devices that have this problem.

Sure. If you do not use the normalScrollElements, then scrolling over it won't have any different effect as scrolling anywhere else.

Is what I'm seeing on iOS a bug?

alvarotrigo commented 7 years ago

Is what I'm seeing on iOS a bug?

I guess the bug is in the browser side yeah. It should not be scrolling the parent site in that way.

ghost commented 7 years ago

Is there another workaround you would recommend?

alvarotrigo commented 7 years ago

Maybe using scrollBar:true if you detect it is a touch device?

ghost commented 7 years ago

The problem only happens with scrollBar:true. I could use scrollBar:false on touch devices but I am using a lazy-load that requires the scrollbar. :( Will the iframe issue be something you will look at in the future?

alvarotrigo commented 7 years ago

I am using a lazy-load that requires the scrollbar.

Why don't you use the fullpage.js lazy load instead?

alvarotrigo commented 7 years ago

Will the iframe issue be something you will look at in the future?

To be honest this is not something I'll put on the top of the list. It is very specific for your use case and might be a case with no solution. I can keep the issue open for the future, but not planning to investigate it soon.

ghost commented 7 years ago

I'm using Wordpress with a theme that I want to avoid editing if possible.

Thank you for your help! If it's a big enough issue I might try using the fullpage lazy load instead.