Hello, Does anyone know how to style safe-area on ionic ios? I need to style safe area for the ios app so it is not always white. Does anyone know how I can change the background of the safe area using css? I have tried following code in the global.scss but it makes the bottom of whole app white.
ion-app {
margin-bottom: env(safe-area-inset-bottom);
}
Safe-area needs to be blue in the login page and white in the payment-history page.
Please advise how to change the background color of safe-area dynamically. Thanks
Can you share some html or a sample app of how you have this setup? This should already be handled in ionic’s components.
The pages that are effected. Show me the login page
Nothing stands out i guess. If you could recreate the issue in a smaller demo app and push that to github, we could look further into it
Ok, I will create sample app and share the github link here. Also I am using
this.statusBar.styleDefault();
Here is a link to demo app. I am using cordova ios.
I look forward to your response.
This is the problematic styles
Not sure why that is there, as it is not part of the standard starters. This should be removed.
If I remove this then content goes all the way down to safe area. Please see attached screenshot from my iPhone.
2 Likes
I have the same issue with safe area color. if using ’ env(safe-area-inset-bottom);’ safe area around the notch will not be the same color as ionic-footer, safe area takes background color. did you resolve your issue?
1 Like
I’m having the same exact problem in my app, The framework doesn’t take care of safe area and if I add as @snavdeepsingh did, It will show the white screen at bottom.
Please help us to resolve this issue @mhartington
Hi, did you find solution for this ?
Did you try changing the background of the content?
2 Likes
The framework doesn’t take care of safe area and that means you should 
I resolved this by adding ion-footer and applying css for safe-area.
.ios-bottom-safe-area {
padding-bottom: var(safe-area-inset-bottom) !important;
padding-bottom: env(safe-area-inset-bottom) !important;
background-color: var(--ion-color-secondary);
}
The framework does take care of the safe area insets…
without a project to inspect (put something on github), it’s difficult to know what could be happening.
exactly my bad… I don’t read docs as often as I should… there are application variables for safe area insets (e.g. --ion-safe-area-bottom ). https://ionicframework.com/docs/theming/advanced
For more info about safe area check this link, it helped me.
It’s impossible to know what’s happening without a project to inspect and sometimes even with a project.
Anyway good job Ionic team!
same issue. please help
did you guys found a solution?
is there any solution i have the same issue.