Bug de transparenceRésolu

Question

Bonjour à tous,


quelqu'un saurait-il comment éviter le bug d'IE avec la transparence que je détaille en-dessous ?


C'est le bug qui fait qu'au lieu de laisser apparaître ce qui se trouve
sous l'objet transparent, IE met... du blanc. Vous me direz, le blanc
c'est joli, mais bon. Parfois IE ne fait ce bug que sur une image de
l'élément, parfois uniquement sur le padding de l'élément, parfois sur
tout l'élément comme je le montre sur l'image... No comment (je ne
voudrais pas me faire aggresser) 


Ci-dessous un screenshot IE, et la même chose chez Firefox.
Si qqn a déjà rencontré ça, merci d'avance :)

PetoleTeam · Accepted Answer

B
onjour...

Je ne sais comment tu procédes, mais ton élément doit surement être un DIV, en mettant par dessus un DIV équivalent, en dimensions bien sur, affecté d'un background-image gérant la transparance, et en déplacent les deux cela doit être jouable.

A priori le problème, avec le peu d'élément dont mous disposons, et un problème de dimensions...?

Attention filter et opacity ne fonctionne pas à ma connaissance sous OPERA.

;0)

pysco68 · Answer

ça dépends comment tu à réalisé la transparence... sous firefox la propiété CSS 'opacity: 0.80' marche très bien alors que sous IE tu dois utiliser 'filter: alpha(opacity=10)' Sinon je sais pas trop... peut être encore coller un spaceholder (gif-transparent) de 1x1 pixel en background et le répeter à l'infini dans l'élément... +

Developpement Web Yannic GraphiX | Mon CMS yArt et ça démo ---> Google est ton meilleur ami! <---

pysco68 · Answer

P.S.: je ne vois pas vraiment de différence entres les deux captures; donc ben j'ai un peu deviné quel était vraiment ton problème.... si jamais c'est poassible mets ta page à problème en ligne quelque part, comme ça on peut y jetter un coup doeil...

Developpement Web Yannic GraphiX | Mon CMS yArt et ça démo ---> Google est ton meilleur ami! <---

Evangun · Answer

Salut ! et merci de ta réponse.

J'ai bien utilisé filter et opacity. Pour le gif transparent à mettre en background, malheureusement ce n'est pas possible, j'ai besoin d'une solution propre dans ce cas-ci.

Je ne peux pas donner l'adresse de la page car elle ne doit pas encore être publique malheureusement. Ce qui se passe sur la première image c'est que le rectangle presque blanc que je montre avec ma flèche rouge, c'est la première des 3 barres grises que je rends transparente à 90%. C'est peut-être le contraste de ton écran qui t'empêche de voir ce rectangle blanc ?

Cette transparence me sert à rendre transparent un objet quand je le drag & drop. Si je n'arrive pas à résoudre le bug, il n'y aura pas de transparence sous IE, tant pis.

Merci pour ton aide en tout cas !

Evangun · Answer

Bonjour PetoleTeam ! merci de ta réponse.

Je vois ce que tu veux dire, mettre une image par-dessus l'ensemble pourrait effectivement marcher ! Je vais essayer ça.

Pour la transparence j'utilise opacity, moz-opacity, filter, khtml-opacity (Konqueror). Normalement moz-opacity fonctionne pour Opera, mais je n'ai pas testé moi-même.

Tu penses à un problème de dimensions ? J'ai essayé de donner des dimensions height et width à ma div, ça n'a pas résolu le problème.

Je suis en train de me dire que c'est peut-être dû au fait que la div en question est bougée par javascript, et que IE ne réinterprète probablement pas la façon dont il devrait faire la transparence dans ce nouveau contexte... plutôt que de se dire "la div se trouve dans une zone X, je vais donc laisser cette zone X apparaître en-dessous" et bien, il ne calcule rien et met du blanc. Et un truc bizarre, c'est que les margins et padding de la div sont systématiquement rendus tout blancs (#ffffff) même si la div n'a que 1% de transparence...

Je mets la question en résolu car je doute qu'on puisse réellement trouver une solution, mais bon... Je vais tenter ton idée d'image PetoleTeam.

Merci à vous deux !

Evangun · Answer

Bon, j'ai trouvé !
Si on écrit une div (ou n'importe quel élément) avec innerHTML ou DOM destinée à être transparente, il faut aussi réécrire son contenant, sous IE en tout cas ! à ce moment-là IE fera bien marcher la transparence.
Et merci de vous être penché sur mon problème.
A bientôt

Delotrerive · Answer

Bonjour !

Peut être me suis je trompé de site ?

Je ne suis pas Développeur/ 

Simplement
Peintre / Infographiste/musicien

Et en ce moment je travaille sur mon site /  étant novice dans ce domaine
le résultat dans Mozilla  F est à peu prés correcte mais lorsque je passe sur internet explorer...  C l'embrouille ! désolé de cette formule...

Certaines personnes pourraient peut être m'aider pour pouvoir afficher
une image de qualité dans IE  ...

je suis donc à la recherche d'une technique pour que l'image calque transparente  Png ( ou une image de qualité équivalente)  soit accepté dans le navigateur IE.

Et l'image Gif déborde  grossièrement.... 

Peut être avez vous une réponse ( pas trop compliquer ...)

Pour ma part ce sera avec plaisir  de contribuer à ce site  ( si mon travail en matière d'image peut vous apportez ou ...) 

Dans l'attente de votre réponse portez vous bien.

PetoleTeam · Answer

Bonjour,
Ce post date un peu et peu de
personne risque de le lire, qui plus est il est accepté, aussi je te
propose d'en ouvrir un autre en n'omettant pas de bien d'écrire ton
problème et de penser à mettre les lignes de codes qui te posent
problème ou un lien vers une page présentant ce problème.
PS: pense à un titre qui colle au mieux.
;O)

Evangun · Answer

Hello,

la meilleure solution du web pour régler autant que possible le problème des png sous IE6 :

http://www.javascriptfr.com/codes/BUG-FIX-TRANSPARENCE-PNG-SOUS-IE_45232.aspx

(via Komodo)

à+

Bug de transparence

9 réponses

Votre réponse

Discussions similaires