You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have a problem that happened without any update or change on my web app, after just revisiting my web
app on pwa access in IOS.
As you can see the page doesnt get the padding to the safe area needed and goes over the status bar.
On other hand, if i have an ion-header, ion-footer, etc.. then applies the safe area, otherwise if only theres an ion-content it doesnt get the needed padding for status bar and nav bar
Also modals, even with ion-header/ion-footer it goes over status/nav bar
This is my webmanifest: "display": "standalone", "display_override": ["window-controls-overlay", "standalone"],
An example of page (Last pic) code:
<ion-page> <ion-content> // rest of html </ion-content> </ion-page>
First pic is a modal with ion-header and ion-content inside ion-modal
I dont modifie or use any var like --offset-top/bottom, --ion-safearea-top/bottom or modify the --padding-top of ion-content in any of my css files or any views
Expected Behavior
Expected that ionic applied safe area properly
Steps to Reproduce
Any PWA App on Safari IOS and a view with only ion-content or open a modal
Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.
Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.
If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.
For a guide on how to create a good reproduction, see our Contributing Guide.
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
I use Ionic Vue 7.0.0: "@ionic/vue": "^7.0.0"
Browser with this problem: IOS Safari 17.5
I've tried the solution provided by another issue about this that the solution was change the meta tag of index.html
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Issue i saw: env(safe-area-inset-*) not working #6688
I have a problem that happened without any update or change on my web app, after just revisiting my web
app on pwa access in IOS.
As you can see the page doesnt get the padding to the safe area needed and goes over the status bar.
On other hand, if i have an ion-header, ion-footer, etc.. then applies the safe area, otherwise if only theres an ion-content it doesnt get the needed padding for status bar and nav bar
Also modals, even with ion-header/ion-footer it goes over status/nav bar
This is my webmanifest:
"display": "standalone", "display_override": ["window-controls-overlay", "standalone"],
An example of page (Last pic) code:
<ion-page> <ion-content> // rest of html </ion-content> </ion-page>
First pic is a modal with ion-header and ion-content inside ion-modal
I dont modifie or use any var like --offset-top/bottom, --ion-safearea-top/bottom or modify the --padding-top of ion-content in any of my css files or any views
Expected Behavior
Expected that ionic applied safe area properly
Steps to Reproduce
Any PWA App on Safari IOS and a view with only ion-content or open a modal
Code Reproduction URL
Code reproduction
Ionic Info
Ionic:
Ionic CLI : 7.1.5 (/home/sistemas/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 7.5.4
Capacitor:
Capacitor CLI : 5.5.1
@capacitor/android : 5.5.1
@capacitor/core : 5.5.1
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run (update available: 2.0.1) : 1.7.4
System:
NodeJS : v20.9.0 (/home/sistemas/.nvm/versions/node/v20.9.0/bin/node)
npm : 10.1.0
OS : Linux 5.15
───────────────────────────────────────────────
───────────────────────────────────────────────
Additional Information
No response
The text was updated successfully, but these errors were encountered: