Vue3 & Capacitor (without Ionic): iOS Safe Area Issue

Capacitor
1

I’ve created an web application with Vue 3 (without Ionic). The goal is to make the already existing mobile web application to an iOS/Android App with the help of Capacitor. Capacitor was successfully able to create an iOS build. There is an issue though: The app does not consider the iOS Safe Area, therefore elements on the top of the app are in the space of the iPhone notch:

image
image904×410 65.4 KB

What would be the best approach to fix this issue in your opinion?

2

If not using Ionic, then you’ll need to set the safe area padding yourself.

In Capacitor 8, a new System Bars plugin was released.

Or look at GitHub - capacitor-community/safe-area: Capacitor Plugin that patches the safe area for older versions of Chromium.