[RÉGLÉ] histoire de z-index ?

[FlodAriege]

Bonjour,

en bas à droite des pages de mon site (pas sur la homepage), j'ai un module sticky qui affiche normalement une image + une bulle de texte qui apparaît au survol de l'image.
Par exemple ici : http://www.rouchenergies.fr/aides-fi...-pyrenees.html

Le code :

<a href="URL" class="link-tooltip" style="z-index: 90;"><img src="images/banners/visitez/visitez-notre-galerie-de-realisation-chauffe-eau-thermodynamique.png" alt="Visitez notre galerie photo de réalisations chauffe-eau thermodynamique" width="120" height="123" /><span style="left: -90px; top: -220px;"><img src="images/banners/visitez-notre-galerie-de-realisations-texte.png" alt="Visitez notre galerie photo de réalisations" width="200" height="200" /></span></a>

Jusqu'ici (mais je ne sais pas jusqu'à quand exactement, et c'est évidemment problématique), ça fonctionnait nickel.
Là je m'aperçois que la bulle de texte (le tooltip étant une image) ne s'affiche plus.

Quand je vais voir le module dans l'admin, l'éditeur m'affiche les choses correctement.
Il semble donc que ça soit uniquement une fois restitué sur le navigateur (chrome ou firefox) que ça dysfonctionne.

Quelqu'un aurait-il une piste pour m'indiquer dans quelle direction je dois chercher pour trouver le responsable de ce dysfonctionnement ?

Pour info, c'est un code issu du template JSN que j'utilise. Ce code marche toujours très bien sur le site démo de JSN, ici : http://demo.joomlashine.com/joomla-t.../pro/index.php
Donc s'il ne marche plus sur mon site, c'est que quelque chose doit bloquer la tooltip, mais quoi ??

Merci d'avance

PS : je précise que lorsque je teste mon bout de code en local, ça fonctionne très bien.

[marie-louise]

Re : histoire de z-index ?

Bonsoir,
Je ne sais pas si cela est le problème mais lorsque j'inspecte <a class="modal link-tooltip" style="z-index: 90;" href="http://www.joomlashine.com/pro-joomla-templates-promo.html" rel="{handler: 'iframe', size: {x: 640, y: 510}}"> il y aurait donc un modal de différence ?

[FlodAriege]

Re : histoire de z-index ?

Problème résolu : c'était le lazy loading qui bloquait le tooltip. Il m'a suffi d'exclure l'image du tooltip du lazy loading (jch) et tout est rentré dans l'ordre. Sujet clos.

[FlodAriege]

Re : histoire de z-index ?

Oui Marie-Louise, j'y ai cru moi aussi et ai tenté de réinsérer ce modal, mais en fait il ne sert qu'à afficher l'URL à l'intérieur d'une d'une boîte au milieu de l'écran.
Merci quand même (ça fait plaisir d'avoir une fille ici !)

[PhilJ]

Re : histoire de z-index ?

Bonjour,


Pour moi cette page ne s'affiche correctement qu'avec certains navigateurs, Opera et Chrome.

Sous IE11 : l'illustration ne s'affiche pas au chargement. Un clic sur l'image la fait apparaître en grand, mais pas du tout dans une fenêtre modale. Curieusement, un retour à l'article fait apparaitre l'image.

Sous Firefox pour Windows (v 43 et 44) : la page n'en finit pas de se charger, l'image n'apparaît jamais. Un clic sur l'image la fait apparaître en grand, mais toujours pas dans une fenêtre modale. Retour à la page : toujours pas d'image.

Test avec une précédente version de Firefox (v 34) : aucun souci.

[FlodAriege]

Re : histoire de z-index ?

Salut PhilJ,

Tu parles bien de ma page ? (pas de celle de démo du template)
C'est vrai que ça faisait longtemps que je n'avais pas vérifié le rendu de mon site sous d'autres navigateurs que Chrome et Firefox, alors je viens de lancer IE11, et je ne vois aucun problème d'affichage.
Quant à Firefox, je tourne sur la v44, et là non plus je ne vois pas de souci.

J'ai un peu adapté le code issu du template : sur le site demo, un clic sur le sticky ouvre une modal, tandis que sur mon site, le clic envoie simplement sur la page galerie.

Pourrais-tu me faire une ou deux captures, que je comprenne ce qui se passe ?

[PhilJ]

Re : histoire de z-index ?

Tu parles bien de ma page ? (pas de celle de démo du template)

Oui. Autres pages testées avec le même type d'image et de mise en page : pareil même chose :-\

Cela dit, on ne parle probablement pas de la même chose : en survolant la zone située tout en bas à droite, j'ai bien une bulle me proposant de visiter une galerie de réalisations (même si je l'ai découverte tout à fait par hasard, car rien n'indique visuellement que cette zone est sensible au survol).


Quant à la page de démo mentionnée, elle s'affiche correctement (et on voit bien un indicateur visuel en forme de coin de page suggérant une zone sensible au survol).


En fait depuis chez moi, le problème est avec l'image en haut à gauche (voir copie d'écran plus bas).

C'est vrai que ça faisait longtemps que je n'avais pas vérifié le rendu de mon site sous d'autres navigateurs que Chrome et Firefox, alors je viens de lancer IE11, et je ne vois aucun problème d'affichage.
Quant à Firefox, je tourne sur la v44, et là non plus je ne vois pas de souci.

Nous avons probablement des navigateurs différents, même s'ils portent le même numéro de version. Ou alors des réglages différents...

Pourrais-tu me faire une ou deux captures, que je comprenne ce qui se passe ?

Voici :



Le code Sigplus me paraît problématique :
—

<li>

<a title="1000 à 1500 € pour financer les travaux d'amélioration énergétique de votre logement, grâce à la Région Midi-Pyrénées" rel="boxplus-sigplus_da04e947c1dfaa4a2ce1dddd8eb9bb99" href="/images/illustrations/visuel-ecocheque-logement-midipyrenees.jpg">

<img width="200" height="258" alt="L'éco-chèque logement Midi-Pyrénées" data-jchll="true" data-src="/cache/preview/3a5742994fef9ddb994e8ce4dfd52f18.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" id="sigplus_da04e947c1dfaa4a2ce1dddd8eb9bb99_img00 00">

<noscript>

&lt;img id="sigplus_da04e947c1dfaa4a2ce1dddd8eb9bb99_img00 00" width="200" height="258" src="/cache/preview/3a5742994fef9ddb994e8ce4dfd52f18.jpg" alt="L'éco-chèque logement Midi-Pyrénées"/&gt;

</noscript>

</a>
<div style="display:none !important;" id="sigplus_da04e947c1dfaa4a2ce1dddd8eb9bb99_img00 00_metadata">

<div id="sigplus_da04e947c1dfaa4a2ce1dddd8eb9bb99_img00 00_summary">

1000 à <strong>1500 €</strong> pour financer les travaux d'<strong>amélioration énergétique</strong> de votre logement, grâce à la Région <strong>Midi-Pyrénées</strong>

</div>

</div>

</li>
—

L'image (= la miniature) semble être un .GIF en Base64 (...dont j'ignore si le code est valide) :
—

src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

Pourquoi donc en Base64 ? Comment est-ce codé ? Et est-ce bien utile dans ce cas ?


=> Hypothèse : si tu as un code différent de celui reproduit ci-dessus, il pourrait bien être la cause du problème observé depuis chez moi et pas depuis chez toi. Est-ce le cas ?

[FlodAriege]

Re : histoire de z-index ?

Salut PhilJ,

Cela dit, on ne parle probablement pas de la même chose : en survolant la zone située tout en bas à droite, j'ai bien une bulle me proposant de visiter une galerie de réalisations (même si je l'ai découverte tout à fait par hasard, car rien n'indique visuellement que cette zone est sensible au survol).

Quant à la page de démo mentionnée, elle s'affiche correctement (et on voit bien un indicateur visuel en forme de coin de page suggérant une zone sensible au survol).

Là tu es quand même taquin avec moi, parce que chez moi aussi il y a un "coin de page qui se tourne" au-dessus de mon image en bas à droite de l'écran. A vrai dire j'ai utiliser comme base l'image du template, que j'ai réinterprétée pour l'adapter à mon activité, mais bon, même discret, le coin de page est là...

Bon, venons-en aux choses sérieuses :

A vrai dire, j'ignore ce qui encode comme ça en gif base64 les miniatures... Est-ce sigplus ? Je n'en sais rien parce que je n'avais jamais remarqué ces bouts de code... Mais je ne crois pas (j'y reviendrai).

A priori j'ai le même code que toi sur mon navigateur :

<ul><li><a href="/images/illustrations/visuel-ecocheque-logement-midipyrenees.jpg" rel="boxplus-sigplus_da04e947c1dfaa4a2ce1dddd8eb9bb99" title="1000 à 1500 € pour financer les travaux d'amélioration énergétique de votre logement, grâce à la Région Midi-Pyrénées"><img id="sigplus_da04e947c1dfaa4a2ce1dddd8eb9bb99_img0000" width="200" height="258" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/cache/preview/3a5742994fef9ddb994e8ce4dfd52f18.jpg" data-jchll="true" alt="L'éco-chèque logement Midi-Pyrénées"/><noscript><img id="sigplus_da04e947c1dfaa4a2ce1dddd8eb9bb99_img0000" width="200" height="258" src="/cache/preview/3a5742994fef9ddb994e8ce4dfd52f18.jpg" alt="L'éco-chèque logement Midi-Pyrénées"/></noscript></a><div id="sigplus_da04e947c1dfaa4a2ce1dddd8eb9bb99_img0000_metadata" style="display:none !important;"><div id="sigplus_da04e947c1dfaa4a2ce1dddd8eb9bb99_img0000_summary">1000 à <strong>1500 €</strong> pour financer les travaux d'<strong>amélioration énergétique</strong> de votre logement, grâce à la Région <strong>Midi-Pyrénées</strong></div></div></li></ul>

Ce qui me fait dire que ce ne serait pas sigplus qui serait à l'origine de cette "conversion", c'est que par exemple ma bannière animée en bas à gauche de l'écran(si toutefois tu la vois), est un gif bien sûr. Et elle aussi a un src en base64 + un data-src "classique".
même mon bouton 'devis gratuit' en sticky sur le bord droit de l'écran subit le même traitement, regarde le code :

<a title="Devis gratuit et sans engagement" href="/devis-gratuit.html"><img title="DEVIS GRATUIT" onmouseover="this.src='/images/banners/devis-gratuit-v2/68x190/v3/devis-gratuit-hover-68x190.png';" onmouseout="this.src='/images/banners/devis-gratuit-v2/68x190/v3/devis-gratuit-normal-68x190.png';" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/images/banners/devis-gratuit-v2/68x190/v3/devis-gratuit-normal-68x190.png" data-jchll="true" alt="bouton devis gratuit" width="68" height="190" /><noscript><img title="DEVIS GRATUIT" onmouseover="this.src='/images/banners/devis-gratuit-v2/68x190/v3/devis-gratuit-hover-68x190.png';" onmouseout="this.src='/images/banners/devis-gratuit-v2/68x190/v3/devis-gratuit-normal-68x190.png';" src="/images/banners/devis-gratuit-v2/68x190/v3/devis-gratuit-normal-68x190.png" alt="bouton devis gratuit" width="68" height="190" /></noscript></a>

Est-ce que tu vois ce bouton sur le bord droit de l'image ?

Je n'avais jamais non plus remarquer qu'il y avait pour chaque image à la fois un src et un data-src : pourrais-tu m'expliquer la différence entre les deux ?

Le point commun de toutes mes images (sauf celles de mes réalisations, que j'ai optimisées à part avec tinypng) serait une optimisation réalisée avec JCHoptimize. Donc c'est peut-être moi qui aurais paramétré un truc de travers. Mais vu que tout s'affiche nickel chez moi, je n'ai rien vu venir...

Merci pour ton temps et pour ton aide.
Bonne nuit et à bientôt.

Flo

[PhilJ]

Re : histoire de z-index ?

Bonjour Flo,

Là tu es quand même taquin avec moi, parce que chez moi aussi il y a un "coin de page qui se tourne" au-dessus de mon image en bas à droite de l'écran. A vrai dire j'ai utiliser comme base l'image du template, que j'ai réinterprétée pour l'adapter à mon activité, mais bon, même discret, le coin de page est là...

J'ai en effet le souvenir de l'avoir vu, mais désormais il ne me reste que le souvenir : cette image est là, en effet, mais elle ne s'affiche pas chez moi.

[...] Ce qui me fait dire que ce ne serait pas sigplus qui serait à l'origine de cette "conversion", c'est que par exemple ma bannière animée en bas à gauche de l'écran(si toutefois tu la vois), est un gif bien sûr. Et elle aussi a un src en base64 + un data-src "classique". Même mon bouton 'devis gratuit' en sticky sur le bord droit de l'écran subit le même traitement [...] Est-ce que tu vois ce bouton sur le bord droit de l'image ?

Non. Je me souviens l'avoir vu, mais maintenant il ne s'affiche plus.

Je n'avais jamais non plus remarquer qu'il y avait pour chaque image à la fois un src et un data-src : pourrais-tu m'expliquer la différence entre les deux ?

Il y a sûrement ici quelqu'un de plus savant que moi sur cette question, toutefois, je crois avoir compris que src est l'attribut standard HTML (obligatoire pour tout élément <img ... / >) permettant d'indiquer le fichier source (= l'image à afficher), tandis que data-src est pour une utilisation en Javascript.

Le point commun de toutes mes images (sauf celles de mes réalisations, que j'ai optimisées à part avec tinypng) serait une optimisation réalisée avec JCHoptimize. Donc c'est peut-être moi qui aurais paramétré un truc de travers. Mais vu que tout s'affiche nickel chez moi, je n'ai rien vu venir...

En résumé, je ne vois quasi (= je ne vois quasi plus) aucune image sur ton site.

Ainsi, sur la page /aides-financieres-renovation-energetique-thermique/eco-cheque-logement-midi-pyrenees.html, l'image principale en haut à gauche ne s'affiche pas. L'annonce commerciale à gauche ne s'affiche pas. La sticky RGE, que je voyais bien il y a encore quelques temps, idem. Le visuel de la plaquette éco-chèque logement Midi-Pyrénées idem. Le coin de page en bas à droite idem. Et il semble aussi qu'il manque des éléments AddThis en dessous de 'Nous vous recommandons aussi'. J'en oublie probablement...

Dans certains cas, les pages sont pratiquement vides, et d'autant plus vides qu'elles sont censées afficher plus d'images. Par exemple celle-ci : /photos-realisations/toutes-categories.html.

Une chose importante, déjà dite : aucune page ne parvient jamais à se charger entièrement, comme si certaines ressources étaient inaccessibles ou bloquées — et, par exemple je dois interrompre le processus de chargement manuellement (touche ESC) pour pouvoir utiliser Firebug. => Pour cette raison, je soupçonne donc moi aussi un réglage problématique dans JCHoptimize (version Pro ?), et / ou un blocage du fait d'un Lazyload excessivement lazy , et / ou un conflit Javascript.

N'utilisant pas JCHoptimize, je ne peux malheureusement pas te renseigner davantage, mais vu que les pages ne se chargent jamais entièrement, peut-être faudrait-il commencer à regarder du côté d'un réglage de type lazyload (essayer sans pour voir)...


Bonne journée,

[FlodAriege]

Re : histoire de z-index ?

Là je suis perdue.
Comme je n'arrive pas à reproduire le problème, je ne peux même pas demander d'aide à JCH (oui, version PRO).
J'ai mis récemment en place aeSecure sur le site, mais je ne sais pas si ça a le moindre rapport avec ce problème vu que je ne sais pas quand il est apparu...
Christophe a bien trouvé un fichier JS manquant, mais à cette heure-ci je ne sais pas encore de quel fichier il s'agit, et s'il le faut ça n'a absolument rien à voir...
Bon, je crois que je suis bonne pour ouvrir un post, mais encore faudrait-il que je sache quelle question poser...
Bouh ça me déprime.

EDIT: hier, j'ai posé la question sur le forum technique de JCH, pour savoir si ce .ig Base64 venait de chez eux. Et je viens d'avoir sa réponse :

I must say though that I seriously doubt the optimized image is the issue here. It doesn't make sense to me that by optimizing images it makes some of your visitors no longer see the images. I suspect that this is caused rather by the lazy-load images. I suggest you carefully check this before going through the process of restoring your images.

The HTML snippet you posted is the modifications the lazy-load feature has made to the img tags. It replaces the original image with a data uri image which is the "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" section. This is a 1px X 1px transparent gif image. It then saves the original url in the data-src attribute. When the image is scrolled into view, it will replace the placeholder image with the original image and then the image loads

Autrement dit, l'image est remplacée, pendant le lazy-loading, par un gif transparent de 1 pixels, puis quand l'internaute descend dans la page, ce gif est remplacé par la vraie image, dont l'adresse est mentionnée dans le date-src.

Bon, ben au moins je sais ce qui génère ce gif, et je comprends un peu mieux au passage comment est différé le chargement des images.
Je vais essayer d'affiner ma question au concepteur de JCH pour voir si sur certains ordi / OS / navigateurs, le lazy-loading peut être la source d'un chargement interminable-interminé.
Et il faut que je demande à Christophe quel est ce fameux fichier JS qu'il a repéré comme manquant sur mon site.

Allez, hauts les coeurs, je reprends des couleurs (même si je ne suis pas sortie des ronces)...


PS: quelle version de windows as-tu ?

[PhilJ]

Re : histoire de z-index ?

Là je suis perdue.

As-tu désactivé le lazyloading comme suggéré ?

[FlodAriege]

Re : histoire de z-index ?

As-tu désactivé le lazyloading comme suggéré ?

Je viens de le faire à l'instant. Tu me diras si ça règle le problème chez toi STP ?

[PhilJ]

Re : histoire de z-index ?

Je viens de le faire à l'instant. Tu me diras si ça règle le problème chez toi STP ?

En grande partie, oui : la plupart des images qui ne s'affichaient plus sont redevenues visibles (RGE en bas à gauche, coin de page en bas à droite, images dans les articles).

Ce qui ne s'affiche toujours pas sous Firefox : l'annonce à gauche sous le champ de recherche.

Aussi, toujours sous Firefox : un clic sur l'image principale en haut à gauche ouvre l'image dans une fenêtre Windows au lieu de l'ouvrir dans une fenêtre modale.

Et, sous Firefox encore : les pages continuent de « mouliner » indéfiniment, comme si elles ne pouvaient pas se charger entièrement.

Chrome : 100 % OK.

[FlodAriege]

Re : histoire de z-index ?

OK, c'est déjà ça.
Si seulement il y avait un moyen de savoir si le problème que tu rencontres est un truc fréquent ou pas, ça me permettrait de prendre une décision éclairée sur le lazy-loading. Là je vais le laisser désactivé sans savoir si je perds plus d'internautes par un temps de chargement peut-être (encore) ralenti, ou bien si j'en aurais perdu davantage par l'absence d'affichage des images.

S'agissant de l'affichage de l'image via la balise sigplus (celle en haut à gauche de l'article, qui devrait normalement s'afficher dans une fenêtre modale), il existe sans doute un code à insérer pour obliger TOUS les navigateurs à utiliser la fenêtre modale ?, mais je ne sais pas par quel bout chercher...

Tu ne m'as pas dit : quelle version de Windows utilises-tu ?
En effet, j'ai fait une série de captures d'écran avec browsershots, et la quasi totalité s'affichent correctement (j'ai fait ça hier, avec le lazy-loading activé). Mais ce faisant, j'ai vu que parfois c'est la version de windows qui change, et pas forcément le navigateur.

Pour ce qui est de l'annonce AdSense sous la zone de recherche, je t'avoue que même chez moi, parfois, aucune annonce ne s'affiche. J'ai renoncé à comprendre pourquoi, car en fait c'est assez rare, et ce n'est pas le 1,50 € que ça me rapporte chaque jour qui mérite que je perde du temps là dessus ;-)

[PhilJ]

Re : histoire de z-index ?

Si seulement il y avait un moyen de savoir si le problème que tu rencontres est un truc fréquent ou pas, ça me permettrait de prendre une décision éclairée sur le lazy-loading. Là je vais le laisser désactivé sans savoir si je perds plus d'internautes par un temps de chargement peut-être (encore) ralenti, ou bien si j'en aurais perdu davantage par l'absence d'affichage des images.

A ma connaissance, le seule façon de cerner l'origine des problèmes consiste à désactiver progressivement et à tester. Le problème, c'est que tu ne rencontres pas de souci d'affichage.

S'agissant de l'affichage de l'image via la balise sigplus (celle en haut à gauche de l'article, qui devrait normalement s'afficher dans une fenêtre modale), il existe sans doute un code à insérer pour obliger TOUS les navigateurs à utiliser la fenêtre modale ?, mais je ne sais pas par quel bout chercher...

Aucune idée, et on ne voit pas cela dans la documentation de Sigplus. Cependant, le plugin propose un mode debug.

Tu ne m'as pas dit : quelle version de Windows utilises-tu ?
En effet, j'ai fait une série de captures d'écran avec browsershots, et la quasi totalité s'affichent correctement (j'ai fait ça hier, avec le lazy-loading activé). Mais ce faisant, j'ai vu que parfois c'est la version de windows qui change, et pas forcément le navigateur.

Windows 8.1, Windows 7 + un bon vieil XP.