[Résolu] Body { overflow-x: hidden } pour Android (v106)

Bonjour,

Je mets à jour mes bandeaux pour l'angle de mes boîtes que j'appelle "ribbons", on peut les voir en action ici : Ribbons, démonstration.

Le problème c'est que les angles de ces ribbons sont susceptibles de sortir du cadre de l'écran, le fait qu'ils soient rognés avec clip-path pour leur mise en forme géométrique ne change rien (c'est le comportement normal). Auparavant j'utilisais un conteneur avec overflow:hidden pour chaque ribbon, mais j'aimerais éviter cette option à l'avenir.

J'ai donc tenté un overflow-x:hidden sur le body et la solution semble correcte... jusqu'à ce que je vérifie sur mon Android v106, et là c'est inefficace : je me retrouve avec une barre de défilement horizontale. Je vérifie sur Can I use : la règle est supportée, je remets à jour mon pen de test... et ça fonctionne ! : CodePen.

... mais toujours pas sur mon site (j'ai bien vidé les caches). Je n'arrive pas à comprendre ce que je loupe... un contexte de formatage différent ? (display: < flex | grid >), autre chose ? Je m'arrache les cheveux...
Modifié par Olivier C (25 Oct 2022 - 15:31)

Mince alors ! Ça marche :

html,
body {
    overflow-x: hidden; /* L'appel des deux sélecteurs `html` et `body` est nécessaire pour couper les dépassements sous ce navigateur, la sélection d'un seul des deux ne suffira pas. */
}

Merci à toi gcyrillus, j'espérais ta venue

Un petit retour pour la postérité : je n'ai pas gardé la valeur hidden car la règle ainsi composée entre en conflit avec la règle position:sticky.

Au final j'ai donc fait ceci :

html,
body {
    overflow-x: clip; /* pas encore très bien supportée */
}

Modifié par Olivier C (27 Oct 2022 - 01:37)