Scrolling on iPhone

[SpacegoatHQ]

I really like this plugin, it works extremely well on desktops. However when I run it on my iPhone 5S (iOS 9.3.2), the scrolling is far from ideal. Scrolling up (swiping down) works like a charm but when I try to scroll down (swiping up) the page often doesn't scroll at all, or I have to swipe several times for the scroll to happen. Then once it starts scrolling down, it doesn't snap to the top of the section, it just stops the scroll where it would normally (without Scrollify). First I thought it was something with my implementation, but I could replicate the issue with the demo site as well when running it on my iPhone.
Have you experienced the same at all? Do you have a fix for this? Thanks

[lukehaas]

There are two aspects of Scrollify that what you're describing might relate to.

1. On a small screen sections will usually have a height that is larger that the screen height. To handle this Scrollify will treat sections as collections of segments, each segment matching the height of the screen, it will then snap to these segments so that the user can see all the content of each section.
2. So that the user can interact with the page elements and not accidentally trigger a page scroll, there is a slight delay in registering a swipe as an intention to scroll.

What you're seeing may simply be what I've described above. Both behaviours are important features for preventing more serious usability issues.

[SpacegoatHQ]

Hey Luke,
Thanks for the quick reply. This totally makes sense. Can you please confirm whether you're experiencing the same issue when scrolling down (swiping up) on an iPhone? Do you have any insights on why this is a problem when only when scrolling down (swiping up)? When scroll up (swipe down) the scroll works perfectly and it's quite smooth as well. When I resize the browser window on a desktop to a mobile size, the scrolling seems to be working fine.
Thanks,
Peter

[lukehaas]

Just had a look on an iPhone 6 and the scrolling seems fine. I'll have a look later today on an iPhone 5.

[SpacegoatHQ]

I guess it works OK both ways, right? Did you use the demo page? Great thanks for checking on an iPhone 5 as well!

[SpacegoatHQ]

Also, can you please advise whether setting setHeights to false has any effect on the scrolling (especially on mobile devices)? What exactly does this setting do, or how does it changes the functionality behavior of the plugin? Thanks

[lukehaas]

Yes, demo page works well scrolling in both directions.

setHeights doesn't impact scrolling. If it's set to false Scrollify will just let each section maintain it's default height. On a mobile this is likely to happen regardless as Scrollify will only adjust the height of sections that are shorter than the viewport.

[SpacegoatHQ]

I tested the demo page on my iPad as well and scrolling down is a bit problematic there too. Do you think scrolling down (swiping up) can be an issue because of the top address bar in iOS safari? It seems I always have to swipe twice for one scroll when scrolling down (swipe up), but one swipe per scroll when scrolling up (swipe down).

[SpacegoatHQ]

Hi again,
Sorry for bombing you with comments, but I just found something strange. You said in an earlier comment that
"On a small screen sections will usually have a height that is larger that the screen height. To handle this Scrollify will treat sections as collections of segments, each segment matching the height of the screen, it will then snap to these segments so that the user can see all the content of each section."
I realised this is different on a desktop browser - even if I reduce the browser window to mobile size. It seems that scrolling within a section works as a normal scroll, i.e. without snapping to segments. Is there are specific reason why desktop browsers have normal scrolling within sections while mobile browsers snap to segments? Is there a way to turn this off on mobile? Currently there are parts of my sections that are pretty much impossible to see / click on due to the segment snapping.
Thanks

[lukehaas]

You'll be able to see this behaviour on desktop if you emulate a mobile and scroll by emulated touch. You won't see it if you're just resizing your browser to a mobile size.

[SpacegoatHQ]

OK, thanks. Makes sense. Is there any way to turn this off on iPhone (small screen) so scrolling only snaps to sections but not to segments?

[lukehaas]

No, just because that would mean users wouldn't be able to see any section content beyond the height of the viewport for each section. So there would be no value to disabling it.

[SpacegoatHQ]

OK, no problems. I guess this is because of how iOS handles the viewport. This is still a great plugin, thanks for sharing it!

[lukehaas]

Id suggest you take a look and see if there are any css or other JavaScript libraries on your page that could be causing the issue you're seeing. I'm not able to recreate the issue you've described on any device.

[SpacegoatHQ]

Yeah I think the lagging I'm seeing might be caused by embedded Vimeo videos. The demo site works much smoother. Thanks again for the great plugin and for your prompt replies! Really appreciate it!