I am running a Capacitor iOS app on phones w/ Notches where I discovered my application was not extending to the full screen after adding "viewport-fit: cover" to my meta tag. Instead, the application did not cover the full screen and had a black bar on the top and bottom of the app.
I was able to get the application to extend to the full screen once I removed the following property from "capacitor.config.json":
“ios”: { “contentInset”: “automatic”, “clipToBounds”: true }
Since my application finally extended to the full screen, I started to implement the safe-area-inset to resolve the issue of certain aspects of the app being hidden by the notch/home bar.
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
However, that did not work as intended. Instead, it reintroduced the black bar on top and bottom in addition to a scroll bar that had not existed prior as seen in the images below (I scrolled to the top and bottom for the images below). Any ideas on what’s causing this, and how to resolve it? Thanks
