I’ve seen several posts around this issue, but unfortunately none of the proposed fixes work for me, or seem “the right way to do it”.
As I understand it, safe areas should be applied automatically to each device, ensuring for e. g. ion-header and ion-footer or ion-tabs to be displayed correctly.
However, in my app this isn’t the case at all. Maybe I’m missing something as I don’t find the docs to be very concise on how and when to use the application variables --ion-safe-area (or if I’m actually supposed to use them - unless I want to change them deliberately for my purposes).
Thank you for taking the time to reply @twestrick.
While this indeed applies the necessary padding, it opens up another problem: the padding will be the same in landscape mode. Which in the end would lead to me having to detect landscape mode and then adding/removing css. That feels like a hack…
Nice find! You might still need to override the safe area defaults due to different size notches. That’s what I had to do starting in Ionic 5 (currently on Ionic 7 and haven’t re-visited).
Coming from a base of VueJS built with vite, this html of course is missing. Didn’t even think about that. Thanks for pointing me to that file, definitely gonna grab the additional bits!
I’will investigate furhter. Thank you for your response and time to write it, I am new to Ionic, I just started and stumbled upon this on start of my journey.