fix(modal, popover): respect safe area insets on popovers and modals #30949
+1,272
−46
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Deployment failed with the following error: |
BenOsodrac
approved these changes
Feb 10, 2026
| // <app-footer><ion-footer>...</ion-footer></app-footer>). | ||
| let hasContent = false; | ||
| let hasFooter = false; | ||
| for (const child of Array.from(el.children)) { |
Member
There was a problem hiding this comment.
Is there a reason we don't use querySelectorAll to get all content descendants?
Comment on lines
+7
to
+12
| export interface SafeAreaConfig { | ||
| top: string; | ||
| bottom: string; | ||
| left: string; | ||
| right: string; | ||
| } |
Member
There was a problem hiding this comment.
Why don't we use this instead of string?
Suggested change
| export interface SafeAreaConfig { | |
| top: string; | |
| bottom: string; | |
| left: string; | |
| right: string; | |
| } | |
| type SafeAreaValue = "0px" | "inherit"; | |
| export interface SafeAreaConfig { | |
| top: SafeAreaValue; | |
| bottom: SafeAreaValue; | |
| left: SafeAreaValue; | |
| right: SafeAreaValue; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue number: resolves #28411
What is the current behavior?
When a modal is displayed on tablet-sized screens (>= 768px × >= 600px), the
--ion-safe-area-*CSS variables are explicitly set to 0px. This was intended for inset modals that don't touch screen edges, but it breaks safe area handling on newer iPads with Face ID/home indicators, causing content to overlap with system UI elements.What is the new behavior?
Modals now dynamically handle safe-area insets based on their type and position. This has to be done because modals that don't touch the edges cannot have a safe area applied (because it will add unnecessary padding), but modals that do touch the edges need to apply safe area correctly or the edges will be obstructed by whatever is in the safe area.
Does this introduce a breaking change?
Other information
Modals test page
Popovers test page
Current dev build: