bug: --ion-safe-area-bottom has no effect and bottom is cut off

[fudom]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

--ion-safe-area-bottom: 50px has no effect. Top works fine, but not bottom.

Expected Behavior

Expected a safe area at bottom. But nothing changes. If top padding is present, it should not move the whole app down! Bottom should always at bottom, not in offscreen. And bottom should respect safe area bottom. Either scroll content or everything (just like top).

For testing:

html {
  --ion-safe-area-top: 50px;
  --ion-safe-area-bottom: 50px;
}

Another bug: Safe area top moves all down and cause cut up bottom.

Steps to Reproduce

1. Test ion-safe-area by override value and play around. See playground.

Code Reproduction URL

https://stackblitz.com/edit/angular-ywh4p1-akj8gswd?file=src%2Fglobal.css

Ionic Info

Ionic 8

Additional Information

The entire main layout, including ion-content, etc., appears to be wrong. I haven't yet examined the Ionic source code, but it doesn't look like a clean flex layout. The ion-content is pushing even the ion-footer. And safe area bottom only affects to the footer but not to e.g. scroll padding, etc. Or better the whole app. Maybe it's because the inner-scroll is absolute in full area with calc etc. That's not so good.

Update: When I set bottom of ion-content .inner-scroll to 106px (or without 50px safe area top: 56px) which is ion-header, than the ion-content is not cut off. So, the ion-header pushes it down and ion-content has no idea that the header exists. But this will work better in a flex layout. Why this decition of absolute pos with calc instead of safe flex layout? But anyway, what's wrong here?

Workaround:

ion-content::part(scroll) {
  /* Override bottom with 56px for ion-header + safe area 50px. That's not good! */
  bottom: 106px;
}

But it would be great if this worked without hacks to fix the framework. What am I missing? What's wrong here?

[brandyscarney]

Thanks for the issue! You are missing an ion-app wrapper in your app: https://stackblitz.com/edit/angular-ywh4p1-tcz2wjjt?file=src%2Fapp%2Fapp.component.html

You can see this included in the starter templates here: https://github.com/ionic-team/starters/blob/main/angular-standalone/base/src/app/app.component.html

There is also documentation for ion-app here: https://ionicframework.com/docs/api/app

Adding the ion-app wrapper will fix the footer not appearing and the flex layout behavior. However, the content will still not have safe area padding applied. This is expected, since Ionic does not assume your content should include safe area padding by default. You can find more details on that here: https://ionicframework.com/docs/api/content#safe-area-padding

Could you let me know if this resolves the issue? Thank you! 🙂