ios-safari-scroll-fixed-elements
CommunityFix iOS Safari scrolling for fixed-position page elements.
System Documentation
What problem does it solve?
This Skill resolves a common iOS Safari bug where fixed-position elements inside overflow:hidden parent bodies fail to scroll, even when overflow-y:auto is set. This issue does not affect desktop browsers, but causes content to be cut off and swipe gestures to fail on iOS devices, breaking usability for pages like login screens, settings panels, and modal overlays.
Core Features & Use Cases
- Provides a complete, tested CSS fix for the root container of affected pages, with explicit explanations for each required property.
- Covers common use cases including React single-page applications, authentication flows, and settings interfaces that use fixed root divs with independent scroll contexts.
- Lists critical pitfalls to avoid, such as incorrect height calculations with vh units on iOS Safari and missing containing block declarations.
Quick Start
Apply the provided CSS rules to your page's root container to fix iOS Safari scrolling failures for fixed-position elements.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: ios-safari-scroll-fixed-elements Download link: https://github.com/freedomw1987/tree_monstor/archive/main.zip#ios-safari-scroll-fixed-elements Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 537,000+ vetted skills library on demand.