fix(modal, popover): respect safe area insets on popovers and modals #30889
+1,119
−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.
|
3 tasks
ShaneK
changed the title
brandyscarney
changed the title
Member
There was a problem hiding this comment.
There is a weird shadow here where the original modal was:
I verified it happens on the test too (ios mode only). Also, why was this shifted down?
Member
There was a problem hiding this comment.
It looks like this style (specifically box-sizing) on div role="dialog" is causing the height shift:
Is this expected?
Comment on lines
+23
to
+24
| --ion-safe-area-left: 0px; | ||
| --ion-safe-area-right: 0px; |
Member
There was a problem hiding this comment.
Can we add some tests for the left & right values? Just to make sure it is shifting for these properly as well.
Comment on lines
+23
to
+24
| --ion-safe-area-left: 0px; | ||
| --ion-safe-area-right: 0px; |
Member
There was a problem hiding this comment.
Can we add some tests for the left & right values? Just to make sure it is shifting for these properly as well.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Test page
Current dev build: