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

TL;DR

If you're experiencing issues with scroll not being smooth on your mobile device, specifically on iPhone with Safari in a Webflow site, there are a few potential solutions you can try:

1. CSS Property: `-webkit-overflow-scrolling`
Add the following code to the custom code section of your project settings or to the page's custom code section:
```css

```

2. Disabling "Overflow: hidden" on Body or Parent Elements:
Check if any parent element or the `body` element has a CSS property of `overflow: hidden`. This can prevent smooth scrolling on mobile devices. Remove or change this property to `overflow: auto` or `overflow: scroll` to restore the smooth scroll functionality.

3. Large Background Images or Animations:
If you have large background images or CSS animations on your site, they can sometimes cause performance issues on mobile devices. Consider optimizing or reducing the size of these elements to improve the overall scrolling experience.

4. Too Many Interactions or Animations:
If you have numerous interactions or animations running simultaneously on your site, it can lead to performance issues and hinder smooth scrolling. Evaluate and optimize your interactions, limiting their use when not necessary and combining them where possible.

5. Check Webflow's Known Issues:
Occasionally, Webflow may have known issues related to scrolling on specific browser and device combinations. Check Webflow's forum, help center, or community to see if there are any reported issues or workarounds for your specific situation.

Remember to test your changes on different devices and browsers to ensure the smooth scrolling issue is resolved across multiple platforms. Additionally, keep your Webflow site updated, as Webflow frequently releases updates that may resolve such issues.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

How can I fix the issue of my edited Webflow settings not reflecting on LinkedIn when sharing the link?

How can I adjust the scroll down button in my Webflow hero section to account for a fixed navbar, ensuring the top part of the second fold is not covered?

How can I redirect the non-www version of my domain name to the www version using Webflow without having to publish the website in two places?

How can I solve the issue of my circle loading animation not moving on Webflow after following a tutorial on After Effects and converting expressions to keyframes?

What could be causing the error in the console when trying to integrate Mailchimp with Webflow and the form is not submitting?

Does Webflow have an integration or feature available for website commenting?

How can I center an image in a column in Webflow?

How can I create a Category Collection Page in Webflow that only displays articles related to a specific category, without affecting other category pages?

Can the default container width of 960px in Webflow be changed to a different value, such as 1140px, for responsive site design?

How can I optimize my Webflow website with vector graphics and lotties to reduce lag and improve performance on mobile devices?

What code can I use to deactivate the zoom in on my phone when I focus on the form (text input) elements in Webflow?

How can I use my own icons as bullet points in an unordered list on my Webflow site?

Can the template used on a website be checked using a template ID in Webflow?

What tools can I use in Webflow to create better sitemaps, including video sitemaps and excluding specific pages? Is Screaming Frog recommended?

Is there a way to hide a download page or landing page behind a form in Webflow and prevent access to the page without form submission?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?

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

How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?

How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?

How can I dynamically redirect to a CMS created after form submission in Webflow?

How can I make the menu close when a link is clicked in Webflow?

How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?

How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?

How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?

Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?

In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!