Testcase der neuesten PNG-Fix-Methoden [update]

18. Juli 2008 Bisher 20 Kommentare

Unser geliebter Internet Explorer 6 konnte bisher keine transparenten PNG-Grafiken darstellen. Mit diversen PNG-Fix-Methoden (JavaScript-Lösungen) konnte dies teilweise behoben werden. Ich habe ein Testcase mit den neuesten Methoden online gestellt.

Die PNG-Fix-Methoden haben bisher eher recht als schlecht funktioniert. In der Performance sind sie langsam, zumindest wenn man alle Bilder und DIVs fetched. Aber sie haben durch die Anwendung der filter-Methode von Microsoft die PNG-Grafiken im IE6 transparent dargestellt. Doch zwei Probleme blieben, egal bei welcher Methode / Fix: background-position und background-repeat hatte nie funktioniert. Während also “richtige” Browser das Hintergrundbild schön gekachelt oder positioniert angezeigt hatten, wurde das Bild im IE6 mit den Fixes zwar transparent angezeigt, aber eben nicht so, wie wir uns das gewünscht hatten. Das Problem: Die filter-Methode lässt die Attribute position und repeat schlicht nicht zu.

Neue Lösungen und Updates

Vor ein paar Tagen erblickte eine neue JavaScript-Lösung das Licht der Welt: Unit PNG Fix. Diese 1 kb kleine Lösung ist schmal, behebt aber die o.g. Probleme nicht. Viel schlimmer: Statt das Hintergrundbild zu kacheln, hat es dieses auf die volle Breite und Höhe gestreckt. Was vom Entwickler nett gemeint ist, ist in keinem Fall das, was wir sehen wollen.

Gerade gestern gab es ein Update des bekannten IE PNG Fix. In seinem Forum hatte Angus Turnbull die Version 2.0 Alpha 2 angekündigt, die nun endlich auch background-position und background-repeat unterstützen soll.

Der Testcase

Ich baute flink ein Testcase, der beide Methoden demonstrieren sollte. Bei dieser Seite zeige ich beide aktuellen Methoden im direkt Vergleich. Per Link kann man zwischen den beiden Varianten umstellen. Ich zeige ein inline-Element, und die beiden Problemfälle – jeweils mit einer Musterdarstellung aus dem Safari.

Dabei stellte ich eben fest, dass Angus eben lediglich die Alpha 1 zum download angeboten hatte, nicht aber die erwartete Alpha 2. Denn die erste Variante, so zeigte mein Testcase, hat die Bilder transparent dargestellt im IE6, sonst ging aber wieder nichts. Angus hat fix reagiert und die Alpha 2 online gestellt. Nun habe ich mein Testcase geupdatet, mit folgendem Resultat:

  • Unit PNG Fix zeigt PNG-Bilder ohne Extra-CSS-Klasse transparent da, kann aber weder background-position, noch background-repeat.
  • IE PNG Fix Alpha 2 zeigt transparente PNG, und beherrscht auch die Kachelung. Der Trick: Das JavaScript wiederholt die Darstellung des Hintergrundbildes von sich aus. Das geht natürlich auf die Performance. Wer stark frequentierte Webseiten mit vielen IE6-Usern administriert, sollte sich den Einsatz gut überlgen. Was weiterhin nicht geht, ist die Positionierung des Hintergrundbildes. Vielleicht kommt ja bald diesbezüglich auch noch ein Update.

    Link zum Testcase

    Update

    Nach Rücksprache mit Angus funktioniert IE PNG Fix sehr wohl mit background-postion, allerdings nur dann, wenn man die Positionierung in Pixel, Prozent usw. angibt:

    Ah, I see! Currently background-position supports the units ‘px’, ’%’ and values like ‘left’, ‘center’ etc. Try them, they should all work! I have yet to implement ‘em’, ‘pt’ etc. etc. as they’re hard to calculate in the space of a couple of kilobytes and the whole script has to work in pixels to correctly tile a background :) . -Angus.

    Dieser Artikel wurde am Freitag, 18. Juli 2008 um 10:47 Uhr von macx geschrieben und unter Intern abgelegt. Du kannst die Antworten zu diesem Beitrag via RSS 2.0-Feed beobachten.

    Hinterlasse hier eine Nachricht, oder sende einen Trackback von deiner Webseite aus.
    Trackback-URL: http://macx.de/journal/testcase-der-neuesten-png-fix-methoden/trackback/

Kommentare

Einen eigenen Kommentar schreiben

  1. 1 Dennis Frank schrieb am 18. Juli 2008 (12:07 Uhr)

    Vielen Dank für die Mühe, David.

    War selbst noch zu faul, das virtuelle Windows zu starten und beide Methoden zu vergleichen. Dass immerhin das Kacheln funktioniert ist schon mal sehr gut. Habe hier auch noch einen Website-Kandidaten, wo ich das nachher gleich mal ausprobieren werde. Hoffentlich hält sich die Performanceeinbuße in Grenzen. Hatte bei einer anderen Seite diesbezüglich schon arge Probleme mit allen möglichen PNG-”Fixes”.

  2. 2 Andreas Stephan schrieb am 21. Juli 2008 (15:07 Uhr)

    Coool. Danke fürs Ausprobieren. Ich hatte es so verstanden, dass background-repeat nach wie vor Probleme macht, aber das sieht wirklich sehr sehr gut aus!

  3. 3 Milos schrieb am 27. Juli 2008 (22:07 Uhr)

    Cool! Danke für den Tipp. Ich hatte in letzter Zeit fast keine freie Minute und entsprechend ging so einiges an mir vorbei! Aber gut gibts RSS :-) thanks!

  4. 4 Maximilian Böhm schrieb am 27. Juli 2008 (23:07 Uhr)

    Wer den Tippfehler findet, darf ihn behalten :)
    (IE PNG Fix Alpha 2 zeigt transparente PGN, und beherrscht auch die Kachelung.)

    Gruß Max

  5. 5 macx schrieb am 28. Juli 2008 (08:07 Uhr)

    Oh, da hat jemand ihn in der Zwischenzeit geklaut. ;-)

  6. 6 Tina H. schrieb am 31. Juli 2008 (08:07 Uhr)

    Ich habe das Script bei mir getestet, leider funktioniert es nicht so wie gewünscht.

    Ausgangslage ist ein png-Hintergrundbild, welches ich in CSS definiert habe. Background-position wurde in Prozent angegeben.

    In FF läuft alles prima. In IE6 wird zwar ein transparenter Hintergrund angezeigt, aber die Position des Bildes verschiebt sich nach links oben.
    Wenn ich das no-repeat rausnehme, übrigens dasselbe Problem, das Bild wird nicht gekachelt, sondern verschiebt sich nach links oben.

    Was kann ich noch tun?

  7. 7 macx schrieb am 31. Juli 2008 (08:07 Uhr)

    Probiere doch mal Pixel statt Prozent, nur um sicher zu gehen.

  8. 8 Tina H. schrieb am 31. Juli 2008 (09:07 Uhr)

    Hab ich schon, keine Veränderung…

  9. 9 macx schrieb am 31. Juli 2008 (09:07 Uhr)

    Dann schau dir am Besten einfach mal die Quelltexte auf meiner Seite an und übernehme einfach mal alles.

  10. 10 Tina H. schrieb am 31. Juli 2008 (10:07 Uhr)

    funktioniert leider nicht :(

  11. 11 Chris schrieb am 20. August 2008 (19:08 Uhr)

    Hi MacX

    Ich habe auch das Problem, dass die Funktion background-repeat nicht funktioniert.
    Zwar habe ich die aktuellste Datei von Twinhelix heruntergeladen und implementiert, aber es will nicht so recht.

    Könntest du mal den Fix, denn du installiert hast zum download bereit stellen?

    Gruss Chris

  12. 12 Sascha schrieb am 26. August 2008 (20:08 Uhr)

    Kurze Frage zum Verständniss:

    Zitat: Wer stark frequentierte Webseiten mit vielen IE6-Usern administriert, sollte sich den Einsatz gut überlgen.

    Verstehe den Zusammenhang nicht ganz. Bilder werden vom Client gecached und JS Scripte werden nur Clientseitig ausgeführt. Wo soll hier zusätzlicher Traffik entstehen?

    Oder meintest du die Performace der IE6 Clients?

    Gruß,
    Sascha

  13. 13 macx schrieb am 27. August 2008 (07:08 Uhr)

    Natürlich ist die Performance gemeint, denn wenn du mit dem PNG-Fix jedes Bild beim Client bearbeitest, nützt dir der Cache rein gar nichts.

  14. 14 Mark schrieb am 07. Januar 2009 (00:01 Uhr)

    Habe hier noch was gefunden vom Dean Edwards – Google-Code Projekt auf Http://code.google.com/p/ie7-js/

    gruß

Kommentare anderer Blogger zu diesem Artikel

Antwort schreiben

Kommentare neuer Teilnehmer werden auf Grund von hohem SPAM-Aufkommen zunächst von mir freigeschaltet, bis sie online erscheinen. Textile kann benutzt werden.

(wird nicht veröffentlicht)