Why isn't my mobile website scrolling smoothly on iPhone?

Store Design

Topic summary

A Shopify store owner reports that their mobile website scrolls smoothly only when moved slowly on iPhone, while Android devices work normally. The site uses the Qrack v2-0-4 theme.

Root Cause Identified:

  • Custom CSS code containing overflow-x: hidden in the timber.css/timber.scss file is causing the scrolling issue
  • An additional structural error displays code at the bottom of the page

Proposed Solutions:

For the scrolling problem:

  • Navigate to Online Stores > Themes > Edit Code
  • Locate timber.css or timber.scss
  • Remove the overflow-x: hidden declaration

For the visible code error:

  • Open theme.liquid file
  • Wrap the exposed code at the end of the file inside <style></style> tags

Current Status:
The original poster initially confirmed the first solution worked, but later reported the scrolling issue returned after implementing the second fix for the visible code. Two additional users have since reported experiencing similar iPhone scrolling problems on their own sites, suggesting this may be a broader issue affecting multiple Shopify stores.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

I am having an issue with the mobile version of my website not scrolling on iPhone. It seems that once page is loaded, you can scroll if you move slowly. The issue does not happen on Android. Video below. Website is: https://bigfoot-4x4.myshopify.com/pages/bigfoot-4x4-inc-home. Using theme qrack v2-0-4. Thank you in advance!https://www.youtube.com/watch?v=xXXN551_IYQ

2

Hi @bigfoot4x4

This is Victor from PageFly - Shopify Page Builder App

I have checked and found that your site had some custom CSS code that caused your issue.

PageFlyVictor_0-1671588754799.png
PageFlyVictor_0-1671588754799.png478×111 2.98 KB

You can find this code in

Step 1: Online Stores > Themes > More Actions > Edit Code

Step 2: Find timber.css or timber.scss and find the “overflow-x: hidden”
Then remove it in the file

Hope this can help you solve the issue

Best regards,

Victor | PageFly

1 Like
3

Hello @bigfoot4x4

It’s GemPages support team and glad to support you today.

I checked the link you mentioned and found that on Iphone the page still scrolls normally. However, there is a piece of code displayed right at the bottom of the page due to a structural error:

GemPages_0-1671589420674.png
GemPages_0-1671589420674.png1917×942 223 KB

You can follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your theme.liquid theme file:

  3. You find the code below at the end of the file and put that code inside the tag pair

GemPages_1-1671589565154.png
GemPages_1-1671589565154.png1920×315 9.84 KB

For example:

GemPages_2-1671589865410.png
GemPages_2-1671589865410.png1278×236 15.4 KB

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

4

Worked like a charm. Thank you fine sir!!

5

I noticed this too, but after putting it inside the tag, the scrolling issue came back.

shopify-3.JPG
shopify-3.JPG794×279 23.8 KB

6

Hi @bigfoot4x4 you should disable it, or make sure that the code is to remove the scrolling issue.
Thank you

7

I noticed this too, but after putting it inside the tag, the scrolling issue came back.

shopify01.JPG
shopify01.JPG775×854 97.9 KB

8

Hello, I have the same issue with gempages homepage on iPhones. Can someone check my website: https://pursetballs.com/

9

Hey,
I am having the same issue on my website https://ayraindia.com/