Der Arne hatte heute ein Problem mit der Darstellung von animierten PNG-Grafiken mit Alphatransparenz im Internet Explorer 7.
Dieses Problem lief mir soweit ich mich erinnern kann bereits vor über einem Jahr im Zuge einer kleinen Webanwendung über den Weg, und da die Aufklärung darüber wohl noch nicht so weit her ist, will ich das hiermit mal schnell nachholen.
Was für ein Problem ist das überhaupt?
Wir alle waren mehr als froh, als der IE7 kam. Nicht das der IE7 ein Wunderwerk der Technik ist, aber im Vergleich zum IE6 ist er förmlich eine Erlösung gewesen, und das unter anderem durch seinen nativen Support für PNG-Grafiken mit Alphatransparenz. Endlich brauchte man keine umständlichen Hacks mehr um sein Layout mit solchen Transparenzeffekten auszustatten. Was jedoch nicht jeder weiß: Das Gluck ist nicht perfekt, denn der IE7 hat immer noch ein Problem damit die besagten Grafiken via JavaScript ordentlich zu dynamisieren. Das wirkt sich dann so aus, das animierte Grafiken auf einmal einen dicken hässlichen schwarzen Rand bekommen der die Transparenz überdeckt. Ich habe das ganze mal in einer Live-Demo (im IE7 aufrufen) und als kurzen Screencast zusammengefasst.
Wann tritt das Problem auf?
Nach ersten Beobachtungen tritt dieser Darstellungsfehler bei PNG-Grafiken mit Alphatransparenz auf, sofern diese durch JavaScript in irgendeiner Form animiert werden. Ein typischer Fall wäre da z.B. die fadeOut()-Funktion von jQuery. Hierbei wird mit der globalen Transparenz eines Objektes gespielt, was den Internet Explorer direkt zum Fehlverhalten anstiftet.
Was kann man dagegen machen?
Zum damaligen Zeitpunkt fand ich leider keine Möglichkeit das Problem zu umschiffen, außer eben das Layout doch wieder nur mit GIF, PNG8 und JPG umzusetzen, was das ganze natürlich wieder unflexibel machte und zudem Mehraufwand bedeutete. Sollte hier jemand wieder mehr wissen als ich… ich wäre mal wieder dankbar :)
Fazit?
Der PNG24-Support für den Internet Explorer 7 ist natürlich eine feine Sache, und für Seiten die keine Fade-Effekte in PNG24-Grafiken nutzen (was sicherlich der größte Teil sein dürfte) auch ohne Probleme nutzbar. Leider ist dieser banale Fehler jedoch wieder ein Beweis dafür, das bei der Programmierung des Internet Explorers bei weitem nicht alle Möglichkeiten berücksichtigt werden, denn anders kann ich es mir nicht erklären das trotz jahrelanger Entwicklungszeit ein solch auffälliges Fehlverhalten scheinbar übersehen wurde.
Bleibt mir nur euch zu empfehlen euch in solchen Fällen möglichst noch von PNG24 fernzuhalten und zu hoffen das ich einen möglichen Hack dafür einfach übersehen habe.
Kommentare zum Thema Der IE7 kann zwar PNG24, ABER...:
Hier wurde das problem letztens auch schon besprochen: http://allinthehead.com/retro/328/when-bugs-collide-fixing-text-dimming-in-firefox-2
Die einzige “Lösung” war leider nur, den IE vom Effekt auszuschließen.
Tritt das Problem auch bei Bewegungs-Animationen auf?
Hi Dennis,
danke für den Link, der war mir bisher noch nicht bekannt. Den IE von Effekten auszuschließen ist natürlich etwas was man machen kann, nur gut ist das natürlich auch irgendwo nicht, gerade wenn man mit Transparenz etwas in den Hintergrund rücken will kann ich mir vorstellen das das im IE7 dann ziemlich frickelig daher kommt.
Was das Verhalten bei Verzerrungen und Bewegungen angeht weiß ich jetzt grad garnicht, ich werde den Testcase wohl einfach mal erweitern und ausprobieren.
Hallo Christian,
falls Du weiterhin am Testen sein solltest, versuche es doch mal mit der IE7.js von Dean Edwards. http://dean.edwards.name/IE7/
Ich habe es dieser Tage erst “entdeckt” und bin fast sprachlos, welche IE-Bugs dieses Script löst!
Viel Glück,
Turicon
Hallo Christian,
Das Problem habe ich vor ein paar Tagen entdeckt. Auch ich habe nach Lösungen gesucht aber keine brauchbare gefunden. Nun habe ich das Problem umgangen in dem ich nicht mehr das PNG aus/einblende, sondern ein darüber liegendes DIV ein/ausblende. Dies funktioniert allerdings nur wenn der Seitenhintergrund einfarbig ist.
Ich habe das gleiche Problem bei einem PNG Logo mit Transparenz, auch noch im IE8. Im Firefox wird es korrekt dargestellt, im IE kommt es zu dem komischen Effekt das es erst schwarz gepixelt gezeigt wird, und dann erst richtig. Ich habe das Logo mit Gimp erstellt. Wäre toll wenn mir jemand nen Tipp geben könnte….
Da bleibt nur der Verzicht auf den Effekt beim IE8. Habe es auch gerade festgestellt :(
Kommentar-Feed für diesen Artikel
Darf ich vorstellen: Der eeePC 900 Was man mit einem eeePC 900 nicht machen sollte
Beim IE8 Beta ist es auch noch so.