Hi guys,
On the iPhone 14, I am seeing a small gap between the status bar and my app. Has anyone seen this issue? Been trying to debug this but I’m stumped.
Thanks
Try these briefly in your client/main.css and see if they correct the layout.
/******** Support for IOS ******/
@supports (padding-top: constant(safe-area-inset-top)) {
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
}
@media (display-mode: fullscreen) {
body {
padding: 0;
}
}
@media (display-mode: standalone) {
body {
padding: 0;
}
}
/* Older browsers (which don't support CSS variables) */
body {
height: 100%;
}
/* Browsers which partially support CSS variables (iOS 11.0 – 11.2)
@supports (padding-top: constant(safe-area-inset-top)) {
body {
--safe-area-inset-top: constant(safe-area-inset-top);
height: calc(100% + var(--safe-area-inset-top));
}
}
/* Adapted from https://medium.com/@draganeror/iphone-x-layout-features-with-css-environment-variables-d57423433dec */
/* Browsers which fully support CSS variables (iOS 11.2+). */
@supports (padding-top: env(safe-area-inset-top)) {
body {
--safe-area-inset-top: env(safe-area-inset-top);
height: calc(100% + var(--safe-area-inset-top));
}
}
@media (display-mode: fullscreen) {
body {
height: 100%;
}
}
@media (display-mode: standalone) {
body {
height: 100%;
}
}
2 Likes
Unfortunately no luck. Thank you for your response though! When inspecting the tag, it shows that the gap is not part of apps section/area that it takes up.
