PNG fade gaat fout in IE

[Barracuda_82]

Ik heb een PNG overlay in een site die overal netjes weergegeven word, behalve in IE. Een plaatje maakt het duidelijk.

Eerste plaatje is gewoon in firefox, tweede is met alleen de PNG gedefineerd als achtergrondafbeelding, en het derde plaatje is hetzelfde, alleen dan met een achtergrondkleur in de overlay. In de laatste situatie gaat de PNG dus wel goed in IE.




Het mag duidelijk zijn dat het defineren van een achtergrondkleur geen optie is, dus de vraag is: hoe los ik dit op?

[Bosmonster]

Niet volgens mij. Is een IE-bug.

[ Voor 23% gewijzigd door Bosmonster op 12-11-2010 12:42 ]

[GoVegan]

mischien dat je iets kunt met de gradient optie in css3pie?
http://css3pie.com/

[Martijntj]

Uit nieuwsgierigheid: Doet IE9 het wel goed?

[OkkE]

De background-color expliciet op "transparent" zetten? Voor sommige bugs helpt dat.

[Bosmonster]

Of gewoon geen opacity combineren met transparante PNG's. IE is daar gewoon geen ster in, zeker niet onder Windows XP.

[Barracuda_82]

Het is inderdaad blijkbaar een probleem van PNG's in combinatie met opacity, als ik die namelijk weg haal doet de PNG het wel goed. Probleem is dat die opacity best belangrijk is én ook geannimeerd word, dus we kunnen de opacity niet in de PNG oplossen.

[Bosmonster]

Je zou een beetje kunnen pielen met position:relative of hasLayout om te kijken of dat wat oplost, maar echt een 100% oplossing heb ik er nog niet voor kunnen vinden, zeker niet als je geen background-color kunt gebruiken.

Wat je eventueel ook kunt proberen is de parent-container animeren en kijken of dat iets oplost (eventueel in combinatie met bovenstaande).

Maar het blijft een beetje trial&error...

[ Voor 29% gewijzigd door Bosmonster op 12-11-2010 13:53 ]

[Barracuda_82]

Ik heb nog een ander trucje geprobeerd door twee lagen in elkaar te leggen, met in de achterste de fade en de voorste alleen een effen kleur en dan de bovenste laag met de effen kleur de opacity van aan te passen, maar dat werkt ook niet in IE.

Ik ga naar een andere oplossing zoeken. Misschien kan ik gewoon iets heel anders verzinnen in plaats van die fade. Nu maar hopen dat de klant dat ook een goed idee vind

[418O2]

PNG in IE is een bitch. Helemaal als je aan de gang gaat met fade's...

[BCC]

Fout gelezen IE8 ipv IE6.

Dit al geprobeerd? http://stackoverflow.com/...ngs-is-fubared-on-my-site

[ Voor 106% gewijzigd door BCC op 12-11-2010 15:06 ]

[Barracuda_82]

Jep, de PNG was inderdaad 1px hoog, maar nu inmiddels 20 ofzo en dat doet niks. Het is echt de combinatie opacity en PNG's wat fout gaat.

[Tom]

Bosmonster schreef op vrijdag 12 november 2010 @ 13:52:
maar echt een 100% oplossing heb ik er nog niet voor kunnen vinden

+1 Same here.
Als je jQuery gebruikt kun je jQuery.support gebruiken om te detecteren of er support voor is geloof ik. Die keer dat wij het gebruiken faden we de boel niet in IE.

[R4gnax]

Bosmonster schreef op vrijdag 12 november 2010 @ 13:52:
Je zou een beetje kunnen pielen met position:relative of hasLayout om te kijken of dat wat oplost, maar echt een 100% oplossing heb ik er nog niet voor kunnen vinden, zeker niet als je geen background-color kunt gebruiken.

Wat je eventueel ook kunt proberen is de parent-container animeren en kijken of dat iets oplost (eventueel in combinatie met bovenstaande).

Maar het blijft een beetje trial&error...

Het is een probleem wat inherent is aan het DXImageTransform filter wat IE < 9 moet gebruiken om de CSS opacity eigenschap te emuleren. De blend modus die het filter intern selecteert om de verschillende bitmap lagen samen te voegen, kan niet goed overweg met input die gedeeltelijk transparant is.

Exact hetzelfde probleem zie je ook op ClearType tekst. De tekst wordt bij gebruik van dit zelfde filter 'korrelig': pixels die voorheen semi-transparant waren om de weergave van het font te smoothen, nemen ineens een solide zwarte kleur aan.

De doorgaans aangeboden oplossing is inderdaad om het element een achtergrondkleur te geven. Vóór het filter toegepast wordt, wordt de invoer platgedrukt tot één laag (zgn. pre-compositing). De achtergrond kleur mengt met de tekst en het als één geheel aan het filter aangeboden resultaat heeft geen transparantie meer. Dan heb je dus ineens weer het juiste gedrag.


Zelfs al zou je alle neveneffecten, en op randgevallen brekende implementatie details negeren, dan nòg wil je terughoudend zijn met DXImageTransform filters, want ze lekken geheugen als een tierelier. Het devies zou dus inderdaad moeten zijn: dan maar geen fade in/out animaties voor IE, maar jammergenoeg is dat aan klanten meestal niet te verkopen.

[ Voor 14% gewijzigd door R4gnax op 12-11-2010 20:54 ]

[mcDavid]

Moet het echt perse een overlay zijn?

Als ik de situatie in de plaatjes in je OP bekijk, zou je het als volgt op kunnen lossen:

Geef de div waar die tekst in staat een witte achtergrondafbeelding die van links naar rechts steeds transparanter wordt, en achtergrondkleur donkergrijs ofzo. Dan krijg je ongeveer de zelfde gradiënt, en kun je dmv verandering van de achtergrondkleur je fade-effect maken.

[Barracuda_82]

@tom: ik ga dat voorstellen. Goed idee!

@r4gnax: bedankt voor de achtergrondinfo! Goed om te weten wat er nu eigenlijk echt gebeurd in IE.

@mcDavid: dat kan helaas ook niet, want de overlay (de naam zegt het al een beetje) moet echt overal overheen liggen. Ik heb inmiddels al een paar verschillende trucjes geprobeerd om het effect te simuleren, maar het word er niet echt mooier van.

[Clementine]

Barracuda_82 schreef op maandag 15 november 2010 @ 08:16:
@tom: ik ga dat voorstellen. Goed idee!

@r4gnax: bedankt voor de achtergrondinfo! Goed om te weten wat er nu eigenlijk echt gebeurd in IE.

@mcDavid: dat kan helaas ook niet, want de overlay (de naam zegt het al een beetje) moet echt overal overheen liggen. Ik heb inmiddels al een paar verschillende trucjes geprobeerd om het effect te simuleren, maar het word er niet echt mooier van.

Even een minder fijne oplossing maar misschien een optie; Browser check doen en een .gif inladen voor ie inplaats van een .png?

Ik heb t eerder gezien, zal zo nog ff naar die site zoeken.

[Barracuda_82]

Een gif voor een semitransparante overlay?

Dan ben ik wel aardig benieuwd naar die website...

[T-MOB]

Wat je nog kunt proberen is om IE geen PNG te serveren maar de gradient te bouwen met CSS:

Cascading Stylesheet:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF000000,endColorstr=#99000000,GradientType=1)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF000000,endColorstr=#99000000,GradientType=1);

Mocht de animatie met opacity dan niet werken dan kun je daar eventueel nog omheen werken door de alpha-component in deze filter-declaratie te animeren.

[BCC]

DXtransforms staan bij erg veel van de bedrijven uit die IE draaien ivm een of andere default security policy.

[Zed_no1]

Laad een scriptje in dat de png fixt.. Ik gebruik altijd iepngfix.htc
Meer info hier -> http://www.twinhelix.com/css/iepngfix/demo/

[R4gnax]

Zed_no1 schreef op donderdag 18 november 2010 @ 08:39:
Laad een scriptje in dat de png fixt.. Ik gebruik altijd iepngfix.htc
Meer info hier -> http://www.twinhelix.com/css/iepngfix/demo/

Maakt ook gebruik van DXImageTransforms. Sterker nog: de AlphaImageLoader transform die dit gedrocht onder de kap gebruikt is één van de ergste. Lekt niet alleen geheugen, maar maakt IE ook instabiel en is een hele zware performance hit. (Daarnaast blokkeert deze ook het renderen van en de interactie met de webpagina terwijl het plaatje waar de transform gebruik van maakt wordt gedownload, als ik me goed herinner.)

Het is al erg genoeg dat mensen het als een 'golden hammer' behandelen voor PNG ondersteuning in IE6, maar je stelt serieus voor om het ook nog voor IE7 en 8 te gebruiken? Dom, dom, dom ...

[Bosmonster]

R4gnax schreef op donderdag 18 november 2010 @ 08:51:
[...]
Dom, dom, dom ...

Ik kan niet ontkennen dat je gelijk hebt, maar een beetje vriendelijker mag wel

[R4gnax]

Bosmonster schreef op donderdag 18 november 2010 @ 10:59:
[...]


Ik kan niet ontkennen dat je gelijk hebt, maar een beetje vriendelijker mag wel

Het was eerlijk gezegd niet op de man bedoeld: ik betreurde de toestand van ons vakgebied als geheel, waar veel mensen nog steeds niet verder komen dan 'effe een scrippie' gebruiken om dingen te 'fixen'. Hierbij wordt vaak vergeten dat er verreikende consequenties kunnen kleven aan het gebruik van zo'n oplossing.

Dit was daar eigenlijk een schoolvoorbeeld van.