11548 sujets

JavaScript, DOM et API Web HTML5

PNG déformées par IE

Bonsoir à tous,

je me retrouve confronté à un problème spécifique à internet explorer (pour changer...):

Je gère une navigation Ajax et à chaque page correspond un avatar (format png).

Par souci d'optimisation, j'ai fait un sprite css pour n'avoir qu'une seule image contenant tous les avatars.

Le changement d'avatar est ensuite géré en JavaScript (via la propriété backgroundPosition).

Sous Firefox, aucun problème tous se passe à merveille (j'ai envi de rajouter "comme d'hab"), mais sous IE, la transparence est très mal gérée.

Une idée d'où pourrait venir le problème?

Merci à vous!!! Smiley smile

EDIT: oups si je mets pas de lien vous ne verrez pas grand chose^^

>>> ICI <<<
Modifié par Dark$hadow (29 May 2009 - 22:46)
Hello,

eh bien j'ai fait le test dans IE7 et je confirme qu'il y a un problème. Je confirme également que cela vient bien du JavaScript puisqu'en le désactivant tout rentre dans l'ordre.

Quant à dire d'où ça vient ? Smiley murf
Modifié par Heyoan (30 May 2009 - 10:13)
Pour la version d'IE, j'ai testé sous IE 7 et 8 (plus d'IE 6 à portée de main Smiley confus )

Effectivement le problème ne se produit que lorsque l'image est gérée en JavaScript.

ARG je sens que je vais encore dire des misères de IE... Smiley fache
Un background déformé dans IE suite à l'application d'un script JS, je dirais que:

1. C'est pas un background. Les background ça se déforme pas.
2. C'est probablement une image créée par un filtre du type AlphaImageLoader. Il y a un script appliqué pour la transparence PNG sous IE?
3. AlphaImageLoader c'est chiant à gérer. On se porte bien mieux sans.
Merci Florent V. Smiley smile

Par contre je ne vois pas bien ce que tu entends par
a écrit :
C'est probablement une image créée par un filtre du type AlphaImageLoader
?

J'ai créé mon sprite via toshop c'est tout ce que je sais Smiley smile

Sais-tu comment je pourrais éradiquer le problème?
Dark$hadow a écrit :
Par contre je ne vois pas bien ce que tu entends par C'est probablement une image créée par un filtre du type AlphaImageLoader
?
Heu... tu utilises un filtre AlphaImageLoader, mais tu n'es pas au courant? Ah, les joies du copier-coller. Smiley lol

Alors hop, tu actives des filtre AlphaImageLoader par ici:
http://mvc.pierrefevrier.fr/Application/style/png_IE6.css

Le problème, c'est que ce filtre ne crée pas un background (pour lequel tu pourrais utiliser du background-position, background-repeat et autres joyeusetés), mais créer une couche graphique entre le background de l'élément (passé à none) et son contenu (inexistant).

Pour les détails, on en parle ici:
http://www.alsacreations.com/astuce/lire/81-transparence-png-ie6.html

Dark$hadow a écrit :
Sais-tu comment je pourrais éradiquer le problème?

En virant cette décoration pour IE6.

Gaffe également aux scripts JS que tu pourrais utiliser et qui appliqueraient ce genre de filtre à toutes les versions d'IE sans distinction. Théoriquement tu ne devrais pas avoir de problème lié à AlphaImageLoader pour IE 7-8 vu que tu n'as pas besoin d'utiliser ce filtre pour ces versions...
A mé ui bien sûr je croyais que le filtre AlphaImageLoader était un mode d'enregistrement des PNG sous photoshop... Smiley confused

Dans ce cas je vois bien de quoi tu veux parler mais théoriquement ça ne devrait pas avoir d'impact puisque le script est activé pour les IE < 7.


        <!--[if lte IE 6]>
            // hack permettant de gérer la transparence des PNG sous IE6
            <link rel="stylesheet" href="<?php echo app_url('style/png_IE6.css'); ?>" type="text/css" />
        <![endif]-->


Je vais quand même tester sans le hack. Smiley smile

Merci pour ton aide.

[EDIT] Je viens de tester en enlevant le css conditionnel mais le résultat est le même. Donc à priori ça ne vient pas de là Smiley ohwell

[EDIT 2] Ptet une piste à suivre: je suis en train de travailler sur la validation de mon formulaire, et je baisse l'opacité de tout le contenu du formulaire au clic sur le bouton submit. Jusque là rien de bien méchant, sauf que sous IE, un espère d'aliasing noir tout moche vient entourer chacune des lettres de mon texte.
Modifié par Dark$hadow (03 Jun 2009 - 22:09)
Je viens de faire des tests complémentaires:

J'ai ajouté la propriété "filter : alpha(opacity=50);" directement dans le fichier css mais rien n'y fait, le bug persiste (donc ne vient pas de JS).

J'ai également fait pas mal de recherches sur le net, mais pas réussi à trouver la solution.

Je pensais peut-être à une histoire de positionnement ou une connerie du genre (à la IE quoi).

Donc pour résumer le problème a lieu aussi bien sur une image que sur du texte si je modifie l'opacité.

(Pour voir ce que ça donne en image RDV sur http://mvc.pierrefevrier.fr )

Merci pour votre aide, je patauge là...
Modifié par Dark$hadow (04 Jun 2009 - 23:35)
Le filtre DirectX pour l'opacité dans IE fait passer le rendu de l'élément par DirectX, et la routine de rendu du texte n'est apparemment pas la même dans ce cas. C'est un problème que j'ai déjà eu l'occasion de constater, et qui rend si nécessaire une implémentation de la propriété CSS 3 opacity dans IE (9?). Concrètement, cela veut dire que l'opacité n'est pas native dans IE 6-8, de même que la transparence PNG n'est pas native dans IE6. Passer par un filtre DirectX (via la propriété filter/-ms-filter) est possible, mais problématique.

Conclusions rapides:
- pas de jeu sur l'opacité des éléments pour IE, surtout si ces éléments doivent contenir du texte;
- en conséquence, on limitera l'usage de l'opacité parce que le progressive enhancement c'est sympa mais si c'est même pas compatible IE8 c'est limité...
Waww si je comprends bien IE est incapable de gérer dynamiquement l'opacité d'un élément??

Pour le texte, je peux réussir à tricher en utilisant une div blanche transparente au dessus du texte, par contre pour l'image, il faut vraiment que je trouve un moyen Smiley smile

C'est quand même fou que je n'arrive pas à trouver plus de doc sur un problème d'opacité gérée en JavaScript (je suis quand même pas le seul à être confronté au problème??)

Merci pour ton aide Florent V.
Je crois que je vais tourner fou...

Sur cette page, le changement d'opacité ne pose aucun problème, et pourtant c'est la même technique que la mienne qui est utilisée Smiley eek

http://www.supportduweb.com/ftp/ybouane/scripts_astuces/javascript/changer_opacite_div/changer_opacite_div.html

[EDIT]En fait non le texte est bien déformé sur cet exemple.

Je me suis résolut à abandonner les animations basées sur l'opacité: tout ça ENCORE à cause d'internet explorer Smiley decu

Merci en tous les cas pour l'aide que vous m'avez apporté.
Modifié par Dark$hadow (07 Jun 2009 - 21:45)
Sujet clos
Aller à