How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?

TL;DR

Check and remove unnecessary overflow: hidden on <body> or <html>.
Replace or limit position: fixed elements; use sticky or absolute instead.
Simplify scroll-based animations and reduce complexity of Lottie or IX2 triggers.
Add transform: translate3d(0, 0, 0) via custom CSS to enable hardware acceleration.
Avoid background-attachment: fixed; use image layers or scrolling divs instead.
Add -webkit-overflow-scrolling: touch to scrollable containers for smoother momentum.
Ensure interactions like modals don’t block body scroll with persistent overflow: hidden.

If your scroll animation or page movement isn’t smooth on an iPhone in Safari, the issue typically relates to CSS properties, large animations, or fixed elements. Here’s how to fix it in Webflow.

1. Check for `overflow: hidden` on the `<body>` or `<html>` elements

Go to the Webflow Designer, select the Body element.
In the Style panel, ensure you aren't using Overflow: Hidden globally unless intentionally restricting scroll.
If you’re using full-screen sections or animations, improperly hidden overflow can interrupt scroll behavior on mobile.

2. Minimize `position: fixed` elements

On iOS Safari, fixed-position elements can cause jittery or laggy scroll.
Try changing any position: fixed elements (like navbars or modals) to position: sticky or absolute (if possible).
If you must use fixed, minimize content inside the element and avoid complex interactions.

3. Reduce or optimize scroll-based animations

Go to Interactions (IX2) and review scroll animations.
Safari on iOS can lag when there are:
Multiple complex Scroll-based Interactions
Lottie animations triggered on scroll
Try simplifying the animation or use While page is scrolling carefully with limited triggers and movement.

4. Enable Hardware Acceleration via `transform: translate3d`

Safari performs better with hardware acceleration.
To force it:
Select the affected element.
In Style, add a tiny transformation like transform: translate3d(0, 0, 0) via custom CSS in Page Settings or custom code component.
Webflow doesn’t expose this directly, so you must inject it as a global style.

5. Avoid large background images with fixed attachment

iOS Safari doesn’t support background-attachment: fixed.
If you're using parallax scrolling with backgrounds, switch to using scrolling divs or image layers instead of fixed background settings.

6. Test with `-webkit-overflow-scrolling` on scrollable containers

If you have custom scroll containers, add -webkit-overflow-scrolling: touch via a custom class in the Embed element or site-wide styles.
This enables momentum scrolling on iOS.

7. Ensure no body-scroll lock conflicts

Check if a modal, menu, or interaction is preventing the body from scrolling by locking it with overflow: hidden or using an overlay.
Make sure to re-enable scroll correctly after those elements close.

Summary

To fix choppy scroll in Safari on iPhone, reduce scroll-triggered animations, avoid fixed elements where possible, and optimize layout for mobile performance. Use hardware acceleration techniques and ensure you're not unintentionally locking scroll through styles or interactions.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer