Ionic Angular ion-content inner-scroll has zero height on iOS preventing scrolling - all...

I have an Ionic Angular application where scrolling is completely broken on iOS (Safari, Firefox, Edge - all WebKit-based). Desktop browsers work perfectly. The diagnostic evidence shows that the .inner-scroll element inside ion-content's shadow DOM has completely collapsed to zero height.

Environment

• 
  Ionic: with Angular standalone components
  
  
• 
  Platform: iOS (all browsers)
  
  
• 
  Status: Desktop works fine, iOS completely broken
  
  
• 
  Behavior: Can only "wiggle" content a few pixels, no actual scrolling
  

Current Setup


Template:

html

<ion-content [fullscreen]="true" class="safe-area-padding">
<!-- Page content here -->
</ion-content>


Relevant Global CSS:

scss

ion-content {
--background: var(--ion-background-color);
--color: var(--ion-text-color);
--padding-bottom: 130px;
overscroll-behavior: contain;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
}


Platform-specific CSS (responsive.scss):

scss

body.ios ion-content {
--offset-bottom: auto !important;
--overflow: auto; // Changed from 'hidden'
}

Fixes Already Attempted (None Worked)

• 
  changed --overflow from hidden to auto
  
  
• 
  Result: no change, height still 0.
  
  
• 
  Added runtime viewport height calculation
  
  
• 
  No change, height still 0
  
  
• 
  Removed all z-index: -1
  
  
• 
  No change
  
  
• 
  Ensured [fullscreen]="true" on all pages
  
  
• 
  No change
  
  
• 
  Increased --padding-bottom
  
  
• 
  No change
  

Questions

1. 
   What could cause Ionic's .inner-scroll element to have zero height on iOS when the parent ion-content has proper height?
   
   
2. 
   Are there known iOS-specific issues with Ionic's shadow DOM scroll implementation?
   
   
3. 
   What else should I investigate? Possible areas:
   
   • 
     Template structure (wrapper elements around ion-content?)
     
     
   • 
     Flexbox layout chain issues?
     
     
   • 
     JavaScript lifecycle hooks manipulating layout?
     
     
   • 
     Ionic configuration for standalone components?
     
4. 
   Has anyone encountered this specific symptom (0 height inner-scroll) on iOS and found a solution?
   

Minimal Reproduction


All affected pages follow this structure:

html

<ion-header>
<ion-toolbar>
<ion-title>Page Title</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
<div class="content-wrapper">
<!-- Content here - plenty of it, should be scrollable -->
</div>
</ion-content>


Works perfectly on desktop, completely broken on iOS (all browsers).

What I Need

• 
  Understanding of why .inner-scroll would collapse to 0 height
  
  
• 
  Diagnostic steps to identify what's constraining the height
  
  
• 
  Solutions beyond the standard fixes I've already attempted
  
  
• 
  Any iOS-specific Ionic gotchas I might be missing
  

This blocks all iOS users from using the application. Any help would be greatly appreciated!

Continue reading...