scrolling Scrolling Issues on Mobile Screens

Hi there, 

I am having scrolling issues on my client's site when viewed on mobile screens. It seems that the website buffers and does not allow the user to scroll down immediately from the top of the page, especially on the blog page (shown in video attached).

I implemented the below code to hide overflow/horizontal scrolling on the website that I believe could be the issue. The code works seamlessly on desktop and some mobile screen sizes, but on some sizes I believe it is the cause for creating this "buffer scroll" issue you see in the video attached.

Code implemented: 

html, body {
    overflow-x: hidden;
}

I have tested the website on an iPhone Xs, iPhone 14 Pro, iPhone 12 mini, and Samsung Galaxy and this scrolling issue does not occur. However, when tested on an iPhone 13 and 12, this is when the issue occurs. It was also tested on Safari and Chrome and on some phones it works just fine, but others it does not. I am wondering if this code or another needs to be adjusted to suit for a certain screen size, but I'm not 100% sure how best to approach that/what to fix.

I would love some insight and assistance on what could be causing this issue, and how best to resolve it. Any help is very appreciated!!

@tuanphan any insight as to what could be causing this issue? 🙂

@paul2009 any insights as to what could be causing this issue?

On 6/21/2023 at 10:09 AM, BrookeP said:

I am having scrolling issues on my client's site when viewed on mobile screens.

I checked the site and I see a number of issues. They appear to be caused by Custom CSS (see screenshot below) but as forum users don't have access to the site, we can't help to troubleshoot.

As a first step, I recommend removing all the custom CSS (save it somewhere safe) and then test it on an iPhone 13 to see if everything works correctly. If it doesn't, contact Squarespace Customer Care and ask them to look at the issue. If it does resolve the issues, this will confirm the CSS as the cause. You can then add a sections of the CSS, save the changes, and check again - until the problems return. This will help you to identify the cause (or causes).

As an aside, the site does not have SSL configured (it is not secure) so you may to enable this too.

This is a late reply, but for anyone who is having the same issue. The code below solved the issued on one of my sites: 

html, body {
  overflow-x: clip;
}
 

i had a similiar issue and fiddling with "animations" tab fixed it for me. Its under "site styles"(paint brush icon).