Skip to main content

Safe Area Inset Helper

v1.0.0

env(safe-area-inset-*) helper — generate padding rules for iPhone notch and Android cutouts.

Safe Area Inset CSS
/* Add to <head> for proper iOS safe area support: */
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

/* CSS */
.safe-area-container {
  padding-top: calc(env(safe-area-inset-top) + 0px);
  padding-right: calc(env(safe-area-inset-right) + 0px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 0px);
  padding-left: calc(env(safe-area-inset-left) + 0px);
}

/* Alternatively as custom properties */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Common use cases */
.fixed-bottom-bar {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.fixed-top-bar {
  padding-top: max(0px, env(safe-area-inset-top));
}