Bug width en responsive

Bonjour,

Sur certaines pages de mon site, comme celle-ci, j'ai un bug de largeur en responsive (barre de défilement).

Mais uniquement sur les navigateurs mobiles, (c'est ballo !) : si l'on resise la fenêtre d'un navigateur desktop, aucun problème. Donc, par exemple, aucun problème pour Chrome desktop, mais problème avec Chrome pour Androïd. Et je n'arrive pas à trouver pourquoi... Peut être mes images, mais je ne suis pas certain, je teste des 'box-sizing:border-box' à droite à gauche...

Et puis alors sous Opéra mobil (pas mini, j'ai laissé tomber son support pour l'instant)... c'est la cata : le site s'affiche correctement, mais j'ai une barre de défilement horrizontale bien plus importante sur ce navigateur que sur les autres browers mobiles.

Merci de ce que vous pourrez m'apprendre.
Modifié par Olivier C (05 Nov 2013 - 23:09)

Bonjour,

J'ai déjà rencontré ce problème, que je m'étais efforcé de corriger en appliquant un overflow:hidden sur un des conteneurs principaux - mais ça ne me semble pas idéal.

Je n'ai pas non plus compris pourquoi certains navigateurs mobiles réagissaient comme ça; je n'ai pu que supputer :
- une marge négative quelque part ?
- une position qui étend un bloc ?
- un pseudo-élément mal placé ?

La discussion m'intéresse aussi

Effectivement je vois une barre de défilement débordant d'environ 40px sur la droite de ton template.

Et bien attendons de voir si quelqu'un s'intéressera à notre sort...


Edit : pour l'instant je m'en suis tiré en ciblant les éléments problématiques (des images w100% dans des éléments parents w100%) en les mettant dans des conditions... :

@media (max-width: 530px) { /* hack pour éléments block problématiques
                            si éléments parents avec width:100%
                            en test...
                            Cette solution n'est pas très élégante... */

    .text img {
        max-width: 30rem;
        height: auto;
    }

} /* END @media */

@media (max-width: 400px) { /* idem */

    .text img {
        max-width: 28rem;
    }

} /* END @media */

@media (max-width: 360px) { /* idem */

    .text img {
        max-width: 20rem;
    }

} /* END @media */

Modifié par Olivier C (06 Nov 2013 - 22:07)

@Ten : si ça t'intéresse :

J'ai trouvé le bug responsable du décalage de ton template en responsive : en désactivant cette valeur :

@media (max-width: 60em)
.w--site, .mw--site, .row {
width: 96%;
}

Si tu désasctive ce code ton site n'est pas à 100% de largeur, mais il est centré. Il ne te reste plus qu'à mettre .row à 100% et le tour est joué.

Dans un des cas que j'ai rencontré, j'ai également résolu le problème en changeant la media-query : au lieu de max-width, je demande maintenant max-device-width (mais sur mon site ou les dimensions sont en ems je ne pense pas que ça change quoi que ce soit).