Скачать или смотреть Fixing overflow-y: scroll Issues in Safari on iOS 14

Learn how to troubleshoot and fix the `overflow-y: scroll` issue in Safari for iOS 14 users with simple CSS adjustments.
---
This video is based on the question https://stackoverflow.com/q/63081679/ asked by the user 'MathiAs2Pique_' ( https://stackoverflow.com/u/12449625/ ) and on the answer https://stackoverflow.com/a/63969831/ provided by the user 'clevertension' ( https://stackoverflow.com/u/3612327/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: CSS & Safari (iOS) - overflow y

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Troubleshooting Overflow Issues in Safari on iOS 14

If you've updated your iPhone to iOS 14 and encountered issues with elements not scrolling as expected in Safari, you're not alone. Since this update, many developers have reported problems, particularly with containers that have the overflow-y: scroll property. In this guide, we’ll delve into the probable cause of this issue and provide a straightforward solution. Let’s get started!

The Problem Explained

After the update to iOS 14, users have noted that their div elements set to scroll vertically no longer function as intended. For example, a <div> with the style property overflow-y: scroll may not allow users to scroll through its contents. This issue was not present in earlier versions, like iOS 13.6, raising concerns among developers regarding potential changes in CSS handling in the new iOS.

Sample Code Structure

To illustrate this issue, here is a simplified example of the HTML and CSS used:

[[See Video to Reveal this Text or Code Snippet]]

The Solution

The source of the scrolling issue has been identified, and it's simpler than you might think! The problem lies with the use of negative z-index values. Specifically, starting with iOS 14, z-index values below zero (z-index: -9999) are not fully supported. Removing these properties can resolve your scrolling issues.

Steps to Implement the Solution

Open Your CSS File: Locate the style definitions for your project.

Find the z-index Declaration: Look for any instances of negative z-index properties on the parent body and scrolling div.

Remove Negative z-index: Simply eliminate the line containing z-index: -9999; or any negative value.

For example, change:

[[See Video to Reveal this Text or Code Snippet]]

After making this change, the CSS for your scrolling element might look something like this:

[[See Video to Reveal this Text or Code Snippet]]

Test Your Changes: Save the changes and open your site in Safari on an iOS device running iOS 14 to check if scrolling behaves correctly now.

Conclusion

Updating your CSS to address the z-index issue will likely solve the problems you're seeing with overflow-y: scroll not functioning as expected in Safari on iOS 14. This straightforward fix can save you a lot of time and frustration as you develop mobile-friendly applications.

If you have any further questions or still experience issues, feel free to reach out for help. Happy coding!