Safari WebKit Scrolling and Viewport Issues — What It Means & How to Fix It
About Safari WebKit Scrolling and Viewport Issues
Fix Safari-specific scrolling bugs including rubber banding, momentum scroll conflicts, and 100vh viewport height issues on iOS. This guide covers everything you need to know about this topic, including common causes, step-by-step solutions, and answers to frequently asked questions.
Here are the key things to understand: Safari on iOS handles scrolling differently from Chrome and Firefox due to WebKit's rubber-band scrolling. The 100vh CSS unit includes the address bar height on iOS, causing content to extend behind the toolbar. Position: fixed elements behave unexpectedly during scroll on iOS Safari, especially with keyboard open. These are long-standing WebKit behaviors that web developers must work around specifically for Safari. Understanding these fundamentals will help you diagnose and resolve this issue more effectively.
The most common reasons this occurs include: Using 100vh for full-screen layouts without accounting for iOS Safari's dynamic toolbar. Position: fixed elements on pages with scrollable content causing layout jumps. Overflow: scroll on nested elements conflicting with Safari's momentum scrolling. CSS scroll-snap-type not being properly handled by WebKit's scrolling implementation. Identifying the root cause is the first step toward finding the right solution.
To resolve this, follow these recommended steps: Replace 100vh with 100dvh (dynamic viewport height) which accounts for the toolbar: height: 100dvh. For older Safari support, use: height: -webkit-fill-available as a fallback. Add -webkit-overflow-scrolling: touch to scrollable containers for smooth momentum scrolling. Test fixed elements with the iOS keyboard open — use visualViewport API to adjust layout dynamically. If these steps do not resolve the issue, consider consulting additional resources or a qualified professional.
This article is part of our Browser Errors collection on Error Codes Wiki. We provide comprehensive, up-to-date information to help you find solutions quickly.
Quick Answer
What is 100dvh?
100dvh is the dynamic viewport height unit that changes as the browser toolbar shows and hides. It represents the actual visible area. It is supported in Safari 15.4+ and all modern browsers. Use it instead of 100vh for mobile layouts.
Overview
Fix Safari-specific scrolling bugs including rubber banding, momentum scroll conflicts, and 100vh viewport height issues on iOS.
Key Details
- Safari on iOS handles scrolling differently from Chrome and Firefox due to WebKit's rubber-band scrolling
- The 100vh CSS unit includes the address bar height on iOS, causing content to extend behind the toolbar
- Position: fixed elements behave unexpectedly during scroll on iOS Safari, especially with keyboard open
- These are long-standing WebKit behaviors that web developers must work around specifically for Safari
Common Causes
- Using 100vh for full-screen layouts without accounting for iOS Safari's dynamic toolbar
- Position: fixed elements on pages with scrollable content causing layout jumps
- Overflow: scroll on nested elements conflicting with Safari's momentum scrolling
- CSS scroll-snap-type not being properly handled by WebKit's scrolling implementation
Steps
- 1Replace 100vh with 100dvh (dynamic viewport height) which accounts for the toolbar: height: 100dvh
- 2For older Safari support, use: height: -webkit-fill-available as a fallback
- 3Add -webkit-overflow-scrolling: touch to scrollable containers for smooth momentum scrolling
- 4Test fixed elements with the iOS keyboard open — use visualViewport API to adjust layout dynamically