Safe-area css ios

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.

I can share html. Which component would you like to see the html of?

this is the app.component.html

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

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.


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?


The framework doesn’t take care of safe area and that means you should :slight_smile: 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 ).
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. :slight_smile:

Anyway good job Ionic team!