fix(core): update offsets when safe-area insets arrive late

[ShaneK]

Issue number: resolves #31337

---

What is the current behavior?

Currently, ion-content caches its fullscreen offsets and only recomputes them on load, a window resize, ionTabBarLoaded, or recalculateDimensions(). A change to --ion-safe-area-top fires none of those, so on Android edge-to-edge, where the real inset only arrives once the native WindowInsets callback has run, the fullscreen scroll region and #background-content stay short by the inset and leave a gap behind a translucent header. Sheet modals have the same problem: --ion-modal-offset-top is a resolved pixel value written at present time, so a sheet presented before the inset is known stays too tall.

What is the new behavior?

Fullscreen ion-content now observes its own box with a ResizeObserver, which works because the content flexes to fill whatever space the headers and footers leave behind. The callback keeps the offsetParent === null guard from onResize(), since a hidden page reports a 0x0 box and recomputing then would zero the offsets, but it skips that method's 100ms debounce, which left the offsets visibly wrong for a small amount of time. Sheet modals subscribe to onRootSafeAreaTopChange(), a hidden probe element whose height tracks var(--ion-safe-area-top) so a change to the variable becomes an observable size change.

Does this introduce a breaking change?

• Yes
• No

Other information

The preview pages won't show the bug on their own, since it needs the inset to change after load. Run document.documentElement.style.setProperty('--ion-safe-area-top', '24px') in the console to trigger it.

• Fullscreen content (iOS) / Fullscreen content (MD)
• Modal safe-area (iOS) / Modal safe-area (MD)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview	Aug 10, 2026 10:05pm