Scrolling issue on Chrome browser for iPhones

Shopify Discussion
1

Some customers having issue with the scrolling on Chrome browser for iOS.

The scrolling is fine on Android and iOS device (iPhone 13 and older) and on Safari, it seems it only happens to iPhone 13 Pro Max and newer with Chrome browser.

Video link: https://cdn.shopify.com/videos/c/o/v/3e038c22c5b24cb5ba712162671234ff.mp4

I don’t have the newer iPhone devices to replicate so I’m pretty much stuck here. Is there any way to fix it? Thanks in advance

2

Hi @hnlq-a6

Thanks for sharing the details and the video.

This seems like a Chrome on iOS-specific rendering issue, especially on newer iPhone models (like the 13 Pro Max and above). Since Chrome on iOS uses WebKit under the hood (same as Safari), quirks like this can sometimes appear due to layout or CSS behavior.

A few things you can try:

  • Check for overflow: hidden or fixed positioning elements that might interfere with native scrolling.
  • Add this CSS tweak to force smoother scrolling:
html, body {
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}
  • Avoid using height: 100vh in some cases—try using min-height: 100% instead.

Since it’s hard to test on newer iPhones, consider using BrowserStack or Xcode’s simulator for testing.

Thanks

3

Hi there @hnlq-a6 This could likely be a theme related issue. What theme do you currently use? My suggestion would be to uninstall it and download it again then see if the issue persists.