Corriger le problème de hauteur 100% (100vh) sur mobile

Astucecss

Publié par le (8772 lectures)

hauteur bug Safari viewport 100vh

Vieux de plusieurs années mais toujours non réglé à ce jour, un "bug" concernant la hauteur 100% de la fenêtre sur Safari continue de perturber nos intégrations web sur mobile.

Concrètement, le phénomène concerne les hauteurs exprimées en valeur 100vh (100% de la hauteur de Viewport) mais qui débordent de la hauteur visible dès lors qu'une barre d'adresse (URL) est présente par exemple.
Ce comportement avait déjà été signalé en 2015 par Nicolas Hoizey.

100vh
Illustration du "bug" de hauteur 100vh sous Safari iOS

Toutefois, il faut savoir que ledit comportement n'est pas un bug mais une fonctionnalité intentionnelle au départ… ce qui ne nous arrange pas.

Correction via CSS

Il est possible de contourner le souci sur les navigateurs mobiles avec la valeur -webkit-fill-available, comme l'illustre le code ci-dessous :

html {
  height: -webkit-fill-available;
}
body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
}

/* Avoid Chrome to see Safari hack */
@supports (-webkit-touch-callout: none) {
  body {
    /* The hack for Safari */
    min-height: -webkit-fill-available;
  }
}

Voir une démo

Pour info, -webkit-fill-available est une version temporaire, non finalisée, de la future valeur fill.
Notez également que ce correctif CSS peut être automatisé grâce à PostCSS.

Correction via JavaScript

Si la solution "simple" en CSS ne suffit pas, il sera alors nécessaire de calculer la hauteur dynamiquement en JavaScript avec window.innerHeight :

:root {
  --vh: 100vh;
}

body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
}
const appHeight = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}
window.addEventListener('resize', appHeight)
appHeight()

Voir une démo

Le futur : Large, Small, et Dynamic Viewports

Afin de pouvoir maîtriser ces notions de tailles de fenêtres fluctuantes, les spécifications CSS sont actuellement en train de plancher sur de nouvelles unités de Viewport : Large, Small, et Dynamic Viewports.

Plus d'informations sur le site de Bram.us.

vh et svh
Les nouvelles unités de Viewport (vh, svh et dvh). Source : Bram.us

Commentaires

Ce problème m'a filé quelques maux de tête... j'en suis arrivé à ne plus du tout utiliser cette unité, et remplacer par un bon vieux 100% :-\

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Oubli de mot de passe ? Pas de panique, on va le retrouver

Pas encore inscrit ? C'est très simple et gratuit.