Hi ionic staff
I’m encountering problems with the margin top, depending on the device I’m it
that’s a Pixel 9 >>
that’s a Pixel 8 >>
As you can see on Pixel 8 I have a button at top right side of the screen, (control icon)
Is there any way to always give the correct top margin?
That’s interesting considering your header is in the right place. So that control button is being loaded behind the header on initial load?
Please provide some code. Even better, a working example on StackBlitz.
I don’t think it is related to Android’s Edge-to-Edge since your header is correct but something to consider still - Edge to edge Android.
I’m also wondering if this might have to do with how the button is positioned, maybe it’s absolutely positioned without enough padding for the status bar height on different devices?
It might help to use ion-safe-area-top or even var(--ion-safe-area-top) in your styles to make sure the margin adjusts dynamically based on the device. I’ve had some success with wrapping the top content in an <ion-header> or even adding a padding-top inline style using the safe area variable.
