header {
position: fixed;
top: 0;
left: 0;
padding: 1em 1em 0; /* fallback when css-variables are not supported */
padding-top: calc(var(--safe-area-inset-top) + 1em);
padding-left: calc(var(--safe-area-inset-left) + 1em);
padding-right: calc(var(--safe-area-inset-right) + 1em);
}
Important that you add the HTML in the head
, else the variables won't active and the browser might shrink down the page to fit in the safe zones