[Résolu] {Bug Responsive} Problème IPad lors d'un clique

Bonjour à tous !

Je n'ai pas l'habitude de demander de l'aide sur les forums, mais là je suis vraiment coincé.

Je suis en train de travailler sur l'intégration d'un site : * édité *
J'ai fait quelques erreurs d'intégration CSS, mais dans l'ensemble ça marche plutôt bien.

On m'a fait remarquer qu'il y avait un gros bug avec un IPad. La largeur du container principal se réduit lors du clic sur un élément du menu principal en haut. Je joins un screenshot qu'on m'a fourni.

* édité *

J'ai testé le site sur tous les navigateurs, sur des outils en ligne permettant de tester le responsive, et sur ma tablette Galaxy S7, mais je n'arrive pas à reproduire ce bug.

Étant donné que l'aspect responsive est important pour ce site, ce bug est très problématique. Je n'ai pas vraiment les moyens d'investir plusieurs centaines d'euros dans un iPad pour tester le fonctionnement du site. Donc si vous avez un iPad et/ou une idée sur l'origine du problème, je vous en serais très reconnaissant

Merci à vous !
Modifié par JulienArcin (18 Sep 2013 - 11:54)

Bonjour,

Ça ressemble à une devinette alors je tente ma chance : je vois que ton élément de navigation est en position absolue, il est possible qu'un quelconque changement d'état (position, marge, contexte de formatage) d'un élément environnant provoque cette réaction. C'est effectivement difficile de tester sans matériel (je n'ai pas ce qu'il faut pour t'aider) mais si jamais, un iPad en démo à la FNAC ou autre pourrait te permettre de tester ça (s'il est connecté à internet ><).

Bonjour,

Je confirme le bug, pas vraiment le temps de chercher
Peut-être un souci avec tes media queries ?
Si tu as besoin de faire des tests après modif, envoi un mp ou postes un lien de test

Bonjour,
Je n'ai pas l'iPad sous la main pour tester mais tu définis une taille de 930px à ton sous-menu qui ajouter un scroll horizontal.

nav#main li div.nav-child ul {width: 930px;}

Peut-être une piste...

OK Merci pour vos réponses, je vais regarder ça en détail et je vous tiens au courant.

Yordi a écrit :
Bonjour,
Je n'ai pas l'iPad sous la main pour tester mais tu définis une taille de 930px à ton sous-menu qui ajouter un scroll horizontal.

nav#main li div.nav-child ul {width: 930px;}

Peut-être une piste...

Nop, je suis obligé de faire ça. Les éléments de deuxième niveau doivent être alignés en dessous des éléments de premier niveau, donc je définis une marge gauche. Mettre un container de 930px de large me permet de définir cette marge par rapport au bord gauche du container, et non par rapport au bord gauche de la fenêtre.

Enfin bref, apparemment ça ne marche toujours pas, et je ne vois pas vraiment comment corriger cette erreur que je n'arrive pas à reproduire (à part acheter un iPad).

Vous avez une idée pour simuler le fonctionnement d'un iPad et reproduire cette erreur ?

Bon apparemment il est possible de debugguer, mais seulement avec un iPad ET un Mac :
http://moduscreate.com/enable-remote-web-inspector-in-ios-6/

Si quelqu'un a un ipad/iphone avec iOS 6 et un Mac et peut me trouver l'origine du problème, je propose une rémunération en échange. C'est assez urgent.

A+ et merci de m'avoir lu !

Salut, en faite la solution vous l'avez depuis le départ, c'est bien les 930px qui pose problème.

2choix possibles soit :
• Convertir les 930px en % (ça pourrait marcher mais j'en suis pas convaincu)

• Utiliser les media queries pour varier la taille du 930px en fonction de la taille d'affichage.
Je vois que ton site est en responsive, tu n'as qu'à adapter le width en fonction des cas que tu proposes.

artsx a écrit :
Salut, en faite la solution vous l'avez depuis le départ, c'est bien les 930px qui pose problème.

2choix possibles soit :
• Convertir les 930px en % (ça pourrait marcher mais j'en suis pas convaincu)

• Utiliser les media queries pour varier la taille du 930px en fonction de la taille d'affichage.
Je vois que ton site est en responsive, tu n'as qu'à adapter le width en fonction des cas que tu proposes.

OK ! Un GRAND merci à toi, le problème à été résolu

Hello,

Désolé de revenir à vous, mais j'ai un nouveau souci, sur iPhone cette fois. On m'a signalé un retrecissement de la zone sur la page :

(édité)

Pourtant celui-ci ne se produit pas sur la maquette statique :

(édité)

Même souci, je n'arrive pas à reproduire le problème. J'ai recherché des problèmes de width comme précédemment, et ça a résolu pas mal de soucis sur le site (encore merci à artsx). Mais je bloque à nouveau, sans comprendre l'origine du problème

Merci à vous pour votre temps.
Modifié par JulienArcin (18 Sep 2013 - 11:54)