Scrolling up and down quickly on on mobile chrome looks "Laggy"

Hi,

I’m having a bug with the mobile version, but only on phone. When scrolling down with my fingers the screen is a bit “laggy”.

Is there any fix on that?

Thanks in advance,

URL:http://happy-desk.webflow.io/
Share link: Design Responsive Websites - Webflow


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I have no problem at all on iPhone X … What is your mobile browser?

Hi @palombokevin

Thanks for posting. I tested as well on this end as well using an iPhone 8 plus and the page seems to load and scroll smoothly.

Can you replicate this issue on a different devices/network connection?

1 Like

Hi @Brando and @donaldsv,

You’re right, I tried on Safari on my iPhone S6 and iPhone Plus and working fine.

But on Chrome, when scrolling “with finger laying down and up on the screen itself, I feel and see a laggy issue”. Try scrolling by keeping your finger on the screen and you will see it too

Probably Chrome issue

Thanks!

But on Chrome, when scrolling “with finger laying down and up on the screen itself, I feel and see a laggy issue”.

I tested this a bit more on Chrome using both Android and iPhone – in both tests the page scrolled smoothly on this end.

I did see a bit of a glitch when scrolling up and down very quickly. However, it looks like this is caused by Chrome’s UI at the top of the viewport moving in and out of view on scroll. I recorded a quick demo showing the glitch, then slowed it down a bit to show the UI moving up and the page adjusting to compensate.

Is this the glitch you are referring to? If so, I think it’s expected behavior from Chrome on mobile.

Thanks @Brando,

Yes it is this laggy feeling. I never experienced that and really think that’s more relied on my website. I also recorded my screen (only on chrome) and look the “text”. It’s like going laggy up and down. I agree, you need to focus on that to see it. But I don’t experience this on any other website :-/…

record: ScreenRecording_06-16-2018 ...

Maybe I set something wrong on “text class”?! I’m totally new in coding with webflow.

Thanks for your help!

Hi @palombokevin

Thanks for the reply here. I don’t think this is any issue with the text class or styles there.

I took another look and it seems like the glitch is caused when the section height is adjusting on scroll. When looking at your Services Wrapper section, I see you’re using % based heights. Using percentage based values will adjust the size of that section according to the size of the web page without including Chrome’s top and bottom UI. So when the Chrome UI becomes larger on scrolling up, the section adjusts in size accordingly.

I recommend using Viewport Height (VH) here instead of percentage. This is because VW (view width) and VH won’t change when the Chrome UI changes height on scroll (reference):

Lengths defined in viewport units (i.e. vh) will not resize in response to the URL bar being shown or hidden. Instead, vh units will be sized to the viewport height as if the URL bar is always hidden. That is, vh units will be sized to the “largest possible viewport”. This means 100vh will be larger than the visible height when the URL bar is shown.

Hope this helps! :slight_smile:

Hi @Brando,

So I applied a VH instead of % and it works fine now :-). Thanks for the research and detailed explanation !

Have a great day,

1 Like

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