Streaming live at 10am (PST)

"Smooth" scroll on mobile device


#1

Hi,
This is my first topic. I hope i’m doing it well.

The scroll is working on mobile device (iphone + safari) but is not smooth. How can i fix it please ?
I mean, it’s not continuos.
Thanks for reply.
Best regards

http://a-moi-la-toque.webflow.io


#2

Hi @amoilatoque, it looks like the site performance is within normal levels:

It could be however that due to the video, there is a delay in the page load on mobiles, I would consider using a page loader to first make sure that all data that need to be downloaded is downloaded before the first interaction begins.

Here is an example page loader updated with IX 2.0: https://webflow.com/website/example-page-loader


#3

Hi,
Thanks for your quick reply.
A page loader is a very good idea but it’s not what i’m looking for the moment.

I didn’t explain myself very well.
I mean, the scroll it’s not continuous on mobile but stops when i leave my finger.

These 2 videos here demonstrate what i mean :

“Smooth” scrolling :

“Not smooth” scrolling :

Thanks for your help.
Best regards.


#4

Hi,
Anyone could help me please ?

Thx


#5

The videos above are not working. Try using LICEcap to record a GIF instead.


#8

Welcome to the Webflow forum!

Could you please edit Screenshot_2017-08-16_140811 and provide ALL the necessary details in your post so we can take a look at your site/issue?

In future if you want faster replies and more accurate answers, I suggest including all the details listed in the link above before someone has to ask.

Thank you.


#10

Hi @amoilatoque,

This is due to the problem where your content is not placed in the body, but using different divs that animate in to display your content.

To fix this it should be as simple as this https://stackoverflow.com/a/47895557/584192

So you should paste this in Site Settings > Page Footer Code and click Save, and re-publish:

<style>
body > div {
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  -webkit-overflow-scrolling: touch;
}
</style>

#11

Thanks you very much @samliew !
It works perfectly :slight_smile:


#12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.