safe areas do not work properly on IOS ( iPhone11 )

[CmarkoLukas]

I have an angular app purely using capacitor 4 without Ionic. I am using the plugin and it works like a charm on Android but unfortunately not so good on iOS. I also tried the css way without the plugin but the result was same:

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
}

With both ways I am using: viewport-fit=cover in viewport metatag ios: { contentInset: "always", in the capacitor.config.ts file },

But the content of the app goes under the status bar / top safe area when scrolling. I also tried various combinations with these options but none of the results was good ( for example I got the safe areas properly but content goes under them and they are transparent I think it was with not using contentInset and viewport-fit with contain not cover ). Is there any way to make this work properly with capacitor 4 on IOS ?

[BVeronezi]

I have the same problem here. Does anyone have a solution for this?

[AlwaysLoveme]

I have an angular app purely using capacitor 4 without Ionic. I am using the plugin and it works like a charm on Android but unfortunately not so good on iOS. I also tried the css way without the plugin but the result was same:

body {

  padding: env(safe-area-inset-top) env(safe-area-inset-right)

    env(safe-area-inset-bottom) env(safe-area-inset-left) !important;

}

With both ways I am using:

viewport-fit=cover in viewport metatag

ios: {

contentInset: "always",  in the capacitor.config.ts file

},

But the content of the app goes under the status bar / top safe area when scrolling. I also tried various combinations with these options but none of the results was good ( for example I got the safe areas properly but content goes under them and they are transparent I think it was with not using contentInset and viewport-fit with contain not cover ).

Is there any way to make this work properly with capacitor 4 on IOS ?

I can't reappear

[YishaqG]

Not sure if I fully get what you're saying, but adding the following made it work for me on iOS

        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"
        />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

[pcsantana]

I was facing the same problem! I solved it and posted the solution here: https://stackoverflow.com/a/78385858/6031927 Give it a try.