[RESOLU] Code Javascript qui dégrade les PNG sur IE7-8

Bonjour,

Je suis en train de faire un design customisé pour ma boutique. J’utilise la version 1.4.0.17 de Prestashop.
Le fond de mon center_column est un png moyennement transparent. Je n’ai aucun problème sur Firefox (W7, WXP, Linux), Chrome (W7), Opera (W7, WXP), IE8 (XP), IE9 (W7) mais apparemment sur quelques pcs windows 7 avec IE 8 mon fond disparait au bout de quelques secondes. Par exemple sur mon pc en IE8 ça faisait le dégradé, j'ai mis à jour vers IE9 et le problème n'apparait plus.

Si je désactive le javascript, pas de problème. Donc en fouillant un peu j’ai trouvé quelle ligne foutait le bazar. Dans “/modules/blockcart/ajax-cart.js” ligne 597. Si je commente la ligne :

$('.ajax_cart_no_product').show('slow'); 

Je n’ai plus le problème. Si je décommente le problème revient.
Par contre chose bizarre même en commentant la ligne (ce qui résout le problème sur toutes les pages) la page article a le même problème, ça pourrait donc venir du product.js aussi.


Le site est dispo à l'adresse http://shop.doeo.fr

Merci d’avance pour votre aide.
Modifié par Elwood (22 Mar 2011 - 16:36)

Bonjour,

le problème vient de la propriété CSS opacity qui peut faire "baver" le texte quand sa valeur n'est pas de 1 ou de 0 mais entre les deux (ni totalement opaque ni totalement transparent).
De mémoire, surtout avec le texte en gras. Je ne me rappelle plus des détails (essaie avec un texte normal à la place de ton image ?) et n'ai pas tenté les PNG avec transparence alpha.

EDIT: et je précise que .show(/* un paramètre "pas instantané" */) fait varier opacity de 0 à 1, d'où le problème avec la fonction. .show(/* rien */) ne fait que passer la valeur de la propriété display de none à block, pas de souci dans ce cas
Modifié par Felipe (22 Mar 2011 - 11:03)

Merci pour cette réponse rapide.

Le texte ne bave pas il me semble... C'est juste le fond de la colonne centrale qui par en dégradé. J'ai joint un fichier, dans la partie supérieur c'est le bug et en bas c'est l'affichage normal.



Si ça vient de l'opacité comment la remettre en état ?

Merci

Il y a aussi des problèmes avec les images translucides (PNG-32 ou PNG-8 avec alpha 8 bits) lorsqu'on applique un filtre DirectX opacity dans IE 6-8. Et la méthode jQuery.show utilise justement ce filtre DirectX dans IE 6-8 vu que ces derniers ne supportent pas nativement la propriété CSS3 opacity.

On parle de ce problème ici:
http://calendar.perfplanet.com/2010/png-that-works/#24bit+css

La solution consiste à... ne pas se mettre dans ce cas de figure.
Donc ne pas avoir d'image translucide en contenu ou fond d'un élément dont on fait varier l'opacité.

En effet on fait.

Ou alors, tu mets en place une image opaque pour IE6,7,8 qui te permettra d'avoir le meilleur rendu possible puisque tu conserveras ça pour tous les BONS navigateurs (et IE9)

fvsch a écrit :
On parle de ce problème ici:
http://calendar.perfplanet.com/2010/png-that-works/#24bit+css

La solution consiste à... ne pas se mettre dans ce cas de figure.

Merci pour le lien, j'ai essayé les solutions mais ça ne change pas grand chose par contre la compression des PNG est assez incroyable avec les outils qu'il donne notamment celui là !

masseuro a écrit :
Ou alors, tu mets en place une image opaque pour IE6,7,8 qui te permettra d'avoir le meilleur rendu possible puisque tu conserveras ça pour tous les BONS navigateurs (et IE9)

Ca me parait être une bonne solution. Par contre les quelques visiteurs du passé avec IE6 sont redirigés vers une page qui leur explique comment s'en passer...

Merci à tous pour votre aide

Bon c'est bon, j'ai donc fait une feuille de style spéciale pour IE7 et 8 avec des images pas transparentes.