Gatsby: Page scrolling not smooth

[ergunpp]

Hi,
I have almost finished a web project and built it and am now serving a test version at: http://chefs-test.s3-website.eu-central-1.amazonaws.com

But I have now realised on mobile, the touch page scroll is not working or just very jumpy and not smooth.
Is there a way to solve this?

Thanks,

[kbrgl]

Hi!

Are you using any libraries that modify scroll behavior (smooth-scrolling anchors, Remark autolink, etc.)?

Can you reproduce this / let me know what plugins you have installed?

[ergunpp]

No I am not using any library. Which one do you recommend?

On 26 Feb 2019 Tue at 21:43 Kabir Goel [e-mail] wrote:

Hi!

Are you using any libraries that modify scroll behavior (smooth-scrolling
anchors, Remark autolink, etc.)?

Can you reproduce this / let me know what plugins you have installed?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/12082#issuecomment-467561407,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXv1V1VPcg0C3mEfiz0vZ5sl430LB9LPks5vRYBggaJpZM4bQpHH
.

[Kosai106]

You can try adding -webkit-overflow-scrolling: touch; to your containing divs, but ultimately it's a hack and the issue lies somewhere else.

[kbrgl]

Sorry, I should have been more clear. Are you currently using any libraries that make changes to scroll behavior?

(I think it's more likely that this is an issue with the website layout as opposed to an issue with Gatsby 😄)

[ergunpp]

No i am not using any libraries. Can you give me hint what issues may cause
this? You can also check the demo site with the link above.
I aporeciate your help.

On 26 Feb 2019 Tue at 22:55 Kabir Goel [e-mail] wrote:

Sorry, I should have been more clear. Are you currently using any
libraries that make changes to scroll behavior?

(I think it's more likely that this is an issue with the website layout as
opposed to an issue with Gatsby 😄)

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/12082#issuecomment-467588618,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXv1V_-FrHptYNfiqCAgU3uXWf2FvGdeks5vRZEpgaJpZM4bQpHH
.

[kbrgl]

May or may not be related to your bug, but somewhere in your code you have a where a div has a classname attribute as opposed to a className attribute. (Note the uppercase 'n'.)

[kbrgl]

Could you create a small repo to reproduce this issue and link it here? I spent some time trying to track down the bug (using devtools) and couldn't figure it out.

[KyleAMathews]

It seems to scroll just fine for me. Perhaps what you're seeing is a bit of glitchness when images load? Is scrolling smoother when you scroll back up?

[ergunpp]

What i mean is on other websites when you pull your finger down once it
keeps scrolling down freely and than comes slowly to halt. But for this one
it just scrolls down as much as you pull. You have to make multiple
pulldown or up movements to navigate

On 27 Feb 2019 Wed at 03:49 Kyle Mathews [e-mail] wrote:

It seems to scroll just fine for me. Perhaps what you're seeing is a bit
of glitchness when images load? Is scrolling smoother when you scroll back
up?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/12082#issuecomment-467676847,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXv1Vz2BiIsn19HpVRcNUix0wchdkd0_ks5vRdYPgaJpZM4bQpHH
.

[KyleAMathews]

What device are you on?

[dkrasniy]

It’s a CSS issue. Try adding the following css to your body/html

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

[ergunpp]

I am on iphone xs max

On 27 Feb 2019 Wed at 06:54 Kyle Mathews [e-mail] wrote:

What device are you on?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/12082#issuecomment-467714058,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXv1V-8XXq224DV_GUQ11XsXQ_LtRrPvks5vRgF1gaJpZM4bQpHH
.

[KyleAMathews]

Can you see the same issue on any other Gatsby sites?

[ergunpp]

@KyleAMathews no I have another gatsby website which scrolls just fine.

[ergunpp]

It’s a CSS issue. Try adding the following css to your body/html

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

This solved the problem! Thank you so much!

[ergunpp]

No. The weird thing is i did another site with gatsby and the same issue is
not happening there. I just need help how to solve that problem.

On Wed, Feb 27, 2019 at 8:04 PM Kyle Mathews [e-mail]
wrote:

Can you see the same issue on any other Gatsby sites?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/12082#issuecomment-467945561,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXv1V5tnSiC1CijD5xqy-4FydjCxvIy8ks5vRrqzgaJpZM4bQpHH
.

[baptisteArno]

Hey guys ! I'm pretty sure this bug exists. I recorded a video :

Gatsby scroll bug on mobile devices

I think the problem comes from the gatsby divs wrapping the body tag. I tried applying a overflow-y : hidden but it seems not to solve the problem. And it happens everywhere on my page.