Sur mobile, un site peut parfois bouger horizontalement alors qu’aucun élément ne semble dépasser. Vous faites glisser la page vers la gauche, et une vilaine bande apparaît à droite. Elle était là, tapie dans l’ombre. Très professionnelle, évidemment.
Ce problème vient presque toujours d’un élément plus large que le viewport. Il peut s’agir d’une image, d’un tableau, d’un slider, d’un bloc WooCommerce, d’un menu mobile, d’une section en width:100vw, d’une grille CSS, ou d’un élément positionné hors écran.
Voici une méthode moderne pour identifier l’élément responsable avec Vanilla JavaScript, puis corriger proprement l’overflow horizontal sans masquer le problème sous un grand tapis CSS.