Scroll Issue on Android and iOS Devices for CMS Template Page

Design help General
1

I’m experiencing a scroll issue on my Webflow site, specifically on Android and iOS devices. Below is a detailed description of the problem:

Platform: Webflow Page with CMS integration

Issue: When landing on a page for the first time, I am unable to scroll. However, if I refresh the page and wait a few minutes, the scroll functionality not work.

Template: I’ve created a template that fetches data from the Webflow CMS, and this issue seems to be occurring only on pages that use this template.

Devices Affected:

  1. Android smartphones
  2. iOS smartphones (iPhones)

This problem does not occur on desktop, only on mobile devices. I’ve tried clearing the cache and tested in different browsers, but the issue persists across different mobile devices and browsers.

Steps to Reproduce:

  1. Load the page on an Android or iOS device for the first time.
  2. Try to scroll – no response feel like a bit Stuck.
  3. Refresh the page and wait a few minutes.
  4. After this, the scroll functionality till not working properly.

Expected Behavior: Scroll should work immediately upon landing on the page without the need for a refresh or delay.

Request: Any guidance or suggestions on what might be causing this issue would be greatly appreciated. Is there a known fix or workaround for Webflow sites experiencing this scroll issue on mobile devices?

Thank you in advance!

Here is my site Read-Only: Webflow - Hitendra Wadhwa

Here is Page Link :- Hitendra’s Recent Speaking Events

For the Testing you can test any Recent Speaking Events on your Android and IOS devices.

2

You have a lot of complexity in the scripts and CSS on this page, which will make it difficult to properly resolve.

However, the problem is the overflow-x here.
Remove that and you should see the scroll works immediately.

html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

I thought that was pretty weird too, so I asked GPT and it gave some pretty cogent responses.

I’ll paste the full response here;

The issue with overflow-x: hidden causing a vertical scroll problem is quite common and can be explained by the following reasons related to layout reflows, interactions between horizontal and vertical overflows, and browser rendering quirks:

1. Browser Layout and Reflow Issues

  • Setting overflow-x: hidden on the html or body tag can sometimes create unexpected side effects because it affects how the browser calculates layout for the entire document.
  • When you explicitly hide horizontal overflow (overflow-x: hidden), the browser might need to recalculate the layout to account for the absence of horizontal scroll. This recalculation can affect the vertical layout, resulting in delays or quirks when the page is trying to determine how much vertical space is needed.
  • The reflow caused by limiting horizontal overflow can force the browser to make additional recalculations to maintain consistency between horizontal and vertical scroll properties, and this additional work can lead to rendering delays.

2. Interaction Between Scroll Properties

  • Setting overflow-x: hidden can interact poorly with other overflow properties, especially if there are elements or sections of the page that are intended to scroll vertically.
  • When the browser is instructed to prevent any horizontal scrolling, it may interfere with the natural handling of vertical scrolling. This happens particularly when elements are allowed to overflow beyond their container boundaries.
  • For example, if an element extends beyond the viewport width, and you hide that overflow with overflow-x: hidden, the browser may get confused about how to properly determine the total height, leading to a scenario where it delays scrolling until the full reflow is complete.

3. Impact of max-width: 100vw

  • Combined with overflow-x: hidden, the CSS rule max-width: 100vw can lead to additional layout calculations:
    • The max-width: 100vw property forces the page to fit within the full viewport width, but when overflow-x: hidden is applied at the same time, the browser struggles to reconcile elements that might technically extend beyond that width.
    • This often causes a conflict, requiring the browser to re-evaluate how the elements are positioned, especially if the element widths fluctuate during page load. This conflict can lead to delays before the page fully calculates and becomes scrollable.

4. The Browser Rendering Pipeline

  • The rendering pipeline for browsers involves calculating the layout, paint, and compositing phases.
  • When overflow-x is set to hidden, it directly impacts the layout phase, especially when there are elements that extend beyond the viewport. This makes it more complex for the browser to efficiently handle the painting of vertical elements.
  • The additional complexity of handling overflow makes it difficult for the browser to determine when the page can be considered ready for user interactions, such as scrolling. As a result, the vertical scroll may be delayed because the browser waits until it finalizes these layout decisions.

5. Rendering Quirks Across Browsers

  • Different browsers may handle overflow-x: hidden differently, and quirks in the rendering engines (such as Blink for Chrome or WebKit for Safari) may lead to inconsistent behavior.
  • Some browsers defer user interactions such as scrolling until they are confident that the entire layout is stable. When overflow-x: hidden is present, the browser may have difficulty determining if the content is stable enough to enable vertical scrolling right away, particularly if other elements are adjusting during the load.