bug: Safe are not aplying on IOS "PWA"

[Diogo-Coding]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

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

───────────────────────────────────────────────

 Ionic CLI update available: 7.1.5 → 7.2.0
     Run npm i -g @ionic/cli to update

───────────────────────────────────────────────

Additional Information

No response

[ionitron-bot[bot]]

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.

[Diogo-Coding]

Heres the code reproduction: https://github.com/Diogo-Coding/bug-safe-area

[ionitron-bot[bot]]

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.