Correction CSS pour 100vh dans WebKit mobile

Online Coding Courses for Kids

Correction CSS pour 100vh dans WebKit mobile

Il n’y a pas longtemps, la façon dont WebKit gère 100vh en CSS, ignorant essentiellement le bord inférieur de la fenêtre du navigateur. Certains ont suggéré d’éviter d’utiliser 100vh, d’autres ont trouvé différentes alternatives pour contourner le problème. En fait, cette question remonte à quelques années lorsque Nicolas Hoizey a déposé un bug avec WebKit sur le sujet (bref): WebKit dit que c’est “intentionnel” 🧐).

L’autre jour, je travaillais avec une mise en page de base flexbox – en-tête, principal, pied de page collant – le genre que nous avons tous vu et utilisé plusieurs fois auparavant:

HEADER GOES HERE
MAIN GOES HERE
FOOTER GOES HERE
body {
  display: flex; 
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}

main {
  flex: 1;
}

J’ai commencé à exécuter des tests de navigateur sur mon iPhone, et c’est à ce moment-là que j’ai remarqué que mon pied de page collant n’avait pas l’air si collant:

Écran mobile montrant un pied de page collant sous la barre de menus de Safari

Le pied de page se cachait sous la barre de menus de Safari. C’est le 100vh bug (fonctionnalité?) que Nicolas a à l’origine découvert et signalé. J’ai fait un petit détour – en espérant que peut-être maintenant un correctif non hacky avait été trouvé – et c’est alors que je suis tombé sur ma propre solution (btw, c’est totalement hacky):

Utilisation de -webkit-fill-available

L’idée derrière -webkit-fill-available – au moins à un moment donné – devait permettre à un élément de s’intégrer intrinsèquement dans une disposition particulière, c’est-à-dire de remplir l’espace disponible pour cette propriété. En ce moment valeurs intrinsèques comme celui-ci ne sont pas entièrement pris en charge par le CSSWG.

Cependant, le problème ci-dessus est spécifiquement dans WebKit, qui Est-ce que soutien -webkit-fill-available. Donc, avec cela à l’esprit, je l’ai ajouté à mon ensemble de règles avec 100vh comme solution de rechange pour tous les autres navigateurs.

body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}

Et maintenant, le pied de page collant est là où je veux qu’il soit dans Safari mobile!

Écran mobile montrant un pied de page collant en bas de la fenêtre au-dessus de la barre de menus de Safari

Est-ce que cela fonctionne vraiment?

Le jury semble être absent. Je n’ai eu aucun problème avec les tests que j’ai exécutés et j’utilise cette méthode en production en ce moment. Mais j’ai reçu un certain nombre de réponses à mon tweet pointant d’autres problèmes possibles avec l’utilisation de celui-ci (les effets des appareils en rotation, Chrome n’ignorant pas complètement la propriété, etc.).

Volonté -webkit-fill-available travailler dans tous les scénarios? Probablement pas, cuz soyons honnêtes: c’est le web, et ça peut être sacrément difficile à construire. Mais si vous rencontrez un problème avec 100vh dans WebKit et vous cherchez une alternative CSS, vous pouvez essayer ceci.

Close Menu