Env(safe-area-inset-*) not working with correct meta tag

Ionic Framework Ionic Vue
1

I have seen this question asked before and most solutions point to the index.html meta tag not being correct, which is not my issue. I am trying to get the Ionic safe areas to apply to my application with no luck - the safe area is not being applied at all no matter what device I am emulating, and it appears that the safe-area-inset-* is not being set at all or to 0px, according to developer tools.

I have attempted to run an iPhone 15 pro emulator, and also ran the app on my own personal ios device.

Ionic CLI 7.2.0

project dependencies and versions:

    "@capacitor/cli": "^6.2.0",
    "@capacitor/core": "^6.2.0",
    "@capacitor/ios": "^6.2.0",
    "@ionic/vue": "^8.4.1",
    "@ionic/vue-router": "^8.4.1",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"

index.html meta tag:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

basic vue page I am troubleshooting:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Welcome</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <div class="login-container">
        <h2>Please sign in or create an account</h2>

        <!-- Email Input -->
        <ion-item>
          <ion-label position="floating">Email</ion-label>
          <ion-input v-model="email" type="email" />
        </ion-item>

        <ion-item>
          <ion-label position="floating">Password</ion-label>
          <ion-input v-model="password" type="password" />
        </ion-item>

        <ion-button expand="block" class="login-button" @click="handleLogin">
          Login
        </ion-button>

        <div class="or-divider">
          <span>OR</span>
        </div>

        <ion-button expand="block" fill="outline" @click="handleSignup">
          Sign Up
        </ion-button>
      </div>
    </ion-content>
  </ion-page>
</template>

<script setup>
import { ref } from 'vue'
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonLabel, IonInput, IonButton } from '@ionic/vue'

const email = ref('')
const password = ref('')

const handleLogin = () => {
  console.log('Logging in with:', email.value, password.value)
}

const handleSignup = () => {
  console.log('Sign up with:', email.value, password.value)
}
</script>

<style scoped>

.login-container {
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.or-divider {
  text-align: center;
  margin: 10px 0;
}
</style>

main.js:

import { createApp } from "vue";
import { IonicVue } from "@ionic/vue";
import App from "./App.vue";
import router from "./router";
import "@ionic/vue/css/core.css";
import "@ionic/vue/css/ionic.bundle.css";
import "./style.css";

const app = createApp(App);
app.use(IonicVue);
app.use(router);
app.mount("#app");

Here are the computed values I see for :

--ion-safe-area-bottom: 0px;
--ion-safe-area-left: 0px;
--ion-safe-area-right: 0px;
--ion-safe-area-top: 0px;
--ion-statusbar-padding: 20px;

Some various images showing the elements:

Screenshot 2024-12-29 at 7.01.06 PM
Screenshot 2024-12-29 at 7.01.06 PM819×1037 127 KB

Screenshot 2024-12-29 at 7.01.32 PM
Screenshot 2024-12-29 at 7.01.32 PM815×1043 132 KB

Screenshot 2024-12-29 at 7.02.06 PM
Screenshot 2024-12-29 at 7.02.06 PM818×1034 155 KB

I am not explicitly setting the values for the safe areas anywhere where it could be overriding them. Any help is appreciated. Thank you!

2

I know you say your meta tag is correct but you are missing minimum-scale=1.0, maximum-scale=1.0, user-scalable=no. Please try that first and report back.

See SOLVED -–ion-safe-area has no effect on iOS - #5 by twestrick.

3

I have tried that tag as I came across that thread you linked as a part of my troubleshooting. Tried it again with no luck.

Some additional notes, these are a scripts I run to build and test my application:

    "build": "vite build",
    "build:ios": "npm run build && npx cap sync ios",
    "ios:live": "ionic cap run ios -l --external",

My ionic.config.json:

{
  "name": "HackTracker",
  "integrations": {
    "capacitor": {}
  },
  "type": "vue"
}

I can confirm that the build has the correct index.html file:
dist/index.html

<!doctype html>
<html lang="en">
  <head>
    <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"/>
    <title>HackTracker</title>
    <script type="module" crossorigin src="/assets/index-BWwIRVYP.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-CU9pxCg9.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Then for the ios build using capacitor:
ios/App/App/public/index.html

<!doctype html>
<html lang="en">
  <head>
    <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"/>
    <title>HackTracker</title>
    <script type="module" crossorigin src="/assets/index-BWwIRVYP.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-CU9pxCg9.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>