[Résolu] Bug jQuery sous iE8

Bonjour,
Je fait appel à vous car j'ai un gros bug que je n'arrive pas à régler.

Sur ma page d'accueil j'utilise jQuery pour un système de news défilantes. Sous iE8 la page affiche un fond blanc alors que ça devrait être une image sur fond noir...

J'ai testé, si j'enlève les lien jQuery :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write("<script src='../script/jquery-1.6.1.min.js'>\x3C/script>")</script>

La page s'affiche correctement.

J'ignore si il y a également un problème du genre sous iE6 e iE7, mais sous iE9 ça semble correcte.

La page en question

Quelqu'un peut-il m'aider?
Modifié par juliesunset (28 Jun 2011 - 15:36)

Bonjour,

juliesunset a écrit :
<script type="text/javascript">window.jQuery || document.write("<script src='../script/jquery-1.6.1.min.js'>\x3C/script>")</script>

N'y aurait-il pas une erreur juste avant l'avant dernier /script?

En UTF-8, pour représenter le chevron ouvrant, ce devrait être &# x3C; (sans l'espace évidemment) situé AVANT l'anti-slash.
Modifié par lddsoft (22 Jun 2011 - 17:18)

Bonjour,

Ça donnerais quelque chose comme ça donc?

<script type="text/javascript">window.jQuery || document.write("<script src='../script/jquery-1.6.1.min.js'>\&#x3C;/script>")</script>

Bonjour,

J'ai fait le changement, mais le bug est toujours là... Je sais vraiment pas pourquoi ça fait ça...

Salut!

Toujours aucun changement... et mes chemins sont correct...

Bonjour Julie,

En ce moment, le fond s'affiche correctement sous mon IE8. As-tu vidé ton cache ?


Cela dit, comme tu as entré la balise </script> en dur dans ton code, le navigateur coupe ton bloc de code et fait apparaître ceci sur la page:

");

Le code orignal (celui sur ton premier post) est le même que celui du projet Boilerplate mobile. Je doute que ce soit ça qui cause problème.

Cela dit, pour t'en assurer (au lieu de tenter toutes les combinaisons possible), commente seulement cette ligne de code. Si ça règle le problème, ça voudra dire qu'effectivement le bug se trouve à ce niveau.

Si rien ne change, tu peux garder la première version de cette ligne de code.


Une autre chose que tu pourrais peut-être essayer est de changer de version de jQuery; OlivierC sur le forum semblait dire qu'il avait eu parfois des problèmes avec les nouvelles versions... Ça ne coute rien d'essayer en tout cas !
Modifié par Vaxilart (23 Jun 2011 - 23:08)

Chez moi, par contre, sous IE, le fond de page est blanc, tandis que sous Firefox 4, l'image apparaît (avec "); en prime, comme le signale Vaxilart).
Il me semble qu'il faudrait remplacer la ligne :

<script type="text/javascript">window.jQuery || document.write("<script src='../script/jquery-1.6.1.min.js'></script>");</script>

par:

<script type="text/javascript">window.jQuery || document.write(unescape("%3Cscript src='../script/jquery-1.6.1.min.js'%3E%3C/script%3E"))</script>

@Lddsoft: J'ai testé la syntaxe originale, et elle fonctionne sans problème:

    <script type="text/javascript">document.write("<script>alert('ok');\x3C/script>")</script>

Ce n'est donc pas un problème d'encodage.

Vaxilart a écrit :
Bonjour Julie,
En ce moment, le fond s'affiche correctement sous mon IE8. As-tu vidé ton cache ?

La page semble s'afficher "correctement" quand iE passe en mode compatible. Mais si tu le désactive le fond est blanc comme l'indique Iddsoft.

Vaxilart a écrit :
]Une autre chose que tu pourrais peut-être essayer est de changer de version de jQuery; OlivierC sur le forum semblait dire qu'il avait eu parfois des problèmes avec les nouvelles versions... Ça ne coute rien d'essayer en tout cas !

Pas bête! je vais regarder ça.

Bonjour,

Bon j'ai essayer de changer la version de jQuery, version 1.6 puis 1.5.2, mais y'a aucun changement de mon côté...

Je pense être vraiment à bout de ressource là...

Bonjour Julie,

Voici peut-être quelques pistes...

1-
Sous IE8, tu as deux div englobant ton contenu qui se rajoutent : div#IE8 et div#IE; ce qui n’est pas le cas sous les navigateurs alternatifs. Est-ce que ces div sont bien implémentés dans ton code ? Sont-elles bien fermées ?

Si tu retire ces divs supplémentaires (tu pourrais les remplacer par des noms de class sur body par exemple) est-ce que ton bug est toujours présent ?

2-
À ce point, il faut y aller méthodiquement pour cibler directement ce qui cause problème. En commentant simplement la ligne contenant jQuery, tu empêche simplement l’exécution de tes scripts reliés – ce qui au fond ne nous aide pas à identifier un problème.

Ce faisant, je te conseillerais de commenter chaque ligne de script une après l’autre et voir le rendu de la page. Dès que le fond réapparaîtra sous IE, prend en note le script que tu as désactivé et continue. Les scripts qui une fois commentés laisseront le fond s'afficher sous IE8 seront les scripts causant le problème.

Il est important de passer la liste complète des scripts (et ne pas s'arrêter au premier) puisque le problème se situe peut-être sur plusieurs dossier .js - ou dépendent d'un autre script appelant les fonctions d'un premier, etc.

Voilà ce que je veux dire :


Test 1 :

<!-- InstanceBeginEditable name="pageScript" -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!--
<script type="text/javascript">window.jQuery || document.write("<script src='../script/jquery-1.6.1.min.js'>\x3C/script>")</script>
-->
<script type="text/javascript" src="../script/jquery.tools.min.js"></script>
<script type="text/javascript" src="../script/news.js"></script>

<!-- InstanceEndEditable -->
<script type="text/javascript" src="../script/home.js"></script>

Test 2 :

<!-- InstanceBeginEditable name="pageScript" -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write("<script src='../script/jquery-1.6.1.min.js'>\x3C/script>")</script>
<!--
<script type="text/javascript" src="../script/jquery.tools.min.js"></script>
-->
<script type="text/javascript" src="../script/news.js"></script>

<!-- InstanceEndEditable -->
<script type="text/javascript" src="../script/home.js"></script>

Et ainsi de suite pour tous les scripts suivants. (selon toute vraisemblance ton fond devrait réapparaître en commentant news.js ou home.js)

Bonjour!

Vaxilart: Pour les div#IE8 et div#IE, oui tout est correct à ce niveau, j'avais vraiment bien vérifier ça.
Concernant ton 2e point. C'est de cette manière que j'avais procédé à l'origine pour localiser le problème, et c'est vraiment les 2 lignes qui appel la version de jQuery qui cause le bug.

D'ailleurs à ce sujet, j'ai fait quelques recherche sur Google. Comme l'avait déjà signalé OlivierC, y'a effectivement un bug avec la version 1.6.1 de jQuery. Et il semblerait que le problème soit connu!
C'est la version 1.6.1 qui cause le bug sous iE8 quand on change la couleur du body. On en parle ici et là.

J'ai changé ma version pour la 1.6. et tout semble correct... (je sais pas pourquoi quand je l'ais fait hier ça avait pas fonctionné.)

Merci pour ces retours juliesunset, votre message a confirmé mes doutes. D'ailleurs depuis la mise à jour pour la version 1.6.2 je n'ai plus de bugs sur le body.

De cette mésaventure, une autre confirmation pour moi qui suis sous Mac : Opéra se comporte bien souvent à la manière d'IE, pas complètement, mais suffisamment pour "prévoir" un bug avant d'aller trop loin dans mon développement sous OSX.
Modifié par Olivier C (05 Jul 2011 - 08:18)