Hey guys, I achieved a good result by modifying the global SCSS, doing it this way:
.ios {
// My component custom header
app-header {
top: 0px;
position: relative;
width: 100%;
z-index: 10000;
}
ion-header {
background: var(--ion-color-primary);
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
--ion-safe-area-top: 2px;
--ion-safe-area-bottom: 20px;
}
ion-content {
// It might not be necessary, you need to test it in the application, in my case, I needed it.
--offset-top: 15px !important;
}
}
There might be issues, as I couldn’t test it on various devices, but it looked great on some devices like iPhone 14 Pro Max, iPhone 11, and the real device iPhone SE. It’s not a perfect solution, but it worked for me.