Intermittent Scroll Issue in Safari on macOS for React/Next.js Application

Question

I am experiencing an intermittent issue with scrolling in my React/Next.js application when using Safari on macOS. The scroll functionality works perfectly in other browsers like Chrome and Firefox, but in Safari, the scroll sometimes stops working entirely across the app. This issue seems to occur randomly and is not tied to any specific page or component.

I have tried the following solutions, but the issue persists:

Ensuring proper CSS for scrollable elements:

html, body {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for Safari */
}

.scrollable-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

Debugging fixed or absolute positioning to ensure no elements block scrolling. Checking JavaScript event listeners to ensure no event.preventDefault() is interfering with scroll behavior. Here is an example of how I structure my scrollable components:

<div className="scrollable-container">
    {/* Scrollable content */}
</div>

I am using Next.js with React, and the issue occurs across multiple pages. Below is a snippet of one of my pages (Dashboard):

export default function Dashboard() {
    useEffect(() => {
        // Ensure the body is scrollable
        document.body.style.overflow = "auto";

        return () => {
            // Cleanup on unmount
            document.body.style.overflow = "";
        };
    }, []);

    return (
        <div className="scrollable-container">
            {/* Dashboard content */}
        </div>
    );
}

Despite these efforts, the issue persists. It seems to be specific to Safari on macOS, and I cannot consistently reproduce it.

Steps to Reproduce:

Open the app in Safari on macOS. Navigate through different pages. Scroll stops working randomly after some time. What I Have Tried:

Adding -webkit-overflow-scrolling: touch to scrollable containers. Ensuring no event.preventDefault() is blocking scroll events. Debugging fixed/absolute elements to ensure they don't block scrolling. Testing in other browsers (works fine in Chrome and Firefox).

Expected Behavior: Scrolling should work consistently across all pages in Safari, as it does in other browsers.

Actual Behavior: Scrolling stops working intermittently in Safari, requiring a page refresh to restore functionality.

Video Link : Video

Question: What could be causing this intermittent scroll issue in Safari, and how can I resolve it? Are there any Safari-specific quirks or debugging techniques I should try?

Any help would be greatly appreciated!

Torben G · Accepted Answer · 2025-06-30 10:04:16Z

0

you could try this code

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* body should not scroll */
}

.scrollable-container {
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

or if you want that the body is scrollable

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.scrollable-container {}

you can also try this because overflow hidden on html can block scrolling in safari

html {
  height: 100%; /* important so that body can use 100% */
}

body {
  height: 100%;
  overflow: hidden; /* block scrolling */
}

answered Jun 30 at 10:04

Torben G

8082 gold badges13 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brijesh Shah Jun 30 at 11:20

"@Torben G, Thanks for your quick response. This approach we already tried, but unfortunately, it's not resolving the issue. We are still facing intermittent scrolling issues in Safari, as shown in the provided video. The issue seems to occur randomly and is not tied to any specific component or page. We have ensured proper CSS (overflow, -webkit-overflow-scrolling: touch) and checked for JavaScript interference, but the problem persists. If you have any other suggestions or debugging techniques specific to Safari, we would greatly appreciate your input. Thank you!"

Collectives™ on Stack Overflow

Intermittent Scroll Issue in Safari on macOS for React/Next.js Application

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related