En finir avec la barre de défilement horizontale et les unités de viewport

J’ai l’habitude de développer sur Mac OS, et sur ses navigateurs (que ce soit Chrome, Firefox ou Safari), la barre de défilement s’affiche par-dessus la page web et est invisible par défaut. C’est joli mais pas très pratique pour un·e développeur·euse. En effet on a vite fait de passer à côté d’une vilaine barre de défilement horizontale.

C’est ce qu’il s’est passé sur un site sur lequel j’ai travaillé récemment. En intégrant le nouveau menu du site, j’ai créé, sans m’en rendre compte, une barre de défilement horizontale sur le site. Elle n’était d’ailleurs pas juste invisible par défaut, mais totalement absente sur Mac OS alors que bien visible sur Windows. La plupart des personnes travaillant sur le projet étant sur Mac OS, on est un peu toutes et tous passé·e·s à côté.

Après m’être auto-flagellée, j’ai donc investigué sur le problème avant de me rendre compte que c’était l’utilisation d’une règle css width: 100vw; qui faisait apparaître cette barre. L’occasion de creuser un peu plus le sujet de ce bug, pas si anodin.

Section intitulée le-probleme-avec-les-unites-de-viewportLe problème avec les unités de viewport

Les unités de viewport sont des unités relatives qui représentent un pourcentage de la taille du viewport. Ainsi 1vh représente 1% de la hauteur du viewport. Bien pratique pour afficher une section de type « hero » par exemple qui prendrait toute la hauteur de l’écran. Cependant...
[Courte citation de 8% de l'article original]