capacitor-plugin-safe-area
capacitor-plugin-safe-area copied to clipboard
safe areas do not work properly on IOS ( iPhone11 )
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 ?