capacitor-plugin-safe-area icon indicating copy to clipboard operation
capacitor-plugin-safe-area copied to clipboard

safe areas do not work properly on IOS ( iPhone11 )

Open CmarkoLukas opened this issue 2 years ago • 4 comments

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 ?

CmarkoLukas avatar Jan 11 '23 08:01 CmarkoLukas