Da mittlerweile so ziemlich alle aktuellen Webbrowser nun die Darstellung von PNG-Bildern mit Transparenzen beherrschen werden ebenesolche immer mehr als transparente gestalterische Elemente in Webprojekten verbaut. Und da der gute Webgestalter auch in Zeiten von VDSL die Ladezeiten seiner Projekte kurz halten will, werden Hintergrundgrafiken so klein wie möglich gehalten.

Allerdings wird man etwas seltsames bemerken, wenn man den Hintergrund eines Overlay-Elements mittels 24-Bit-PNG-Grafik transparent gestalten will und die Grafik kleiner als 10×10 Pixel ist. IE7 fängt bei einer solchen Webseite plötzlich an zu Stottern und das Scrollen wird zur Qual. Nach etwas Recherche im Internet wird es schnell zur Gewissheit das der IE7 wohl ein argen Bug hat der diese Performance-Probleme verursacht.

Die Lösung des Problem ist aber ebenso einfach. Entweder man skaliert die Grafik per Grafiksoftware auf z.B. 20×20 Pixel oder man verwendet gleich CSS-Code um den Hintergrund zu rendern.

#transparentes-overlay-element {
    background-color: #999999;
    /* For browsers who care */
    opacity: 0.7;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    /* For IE 8+ - Don't miss the added quotes */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

Solche Bugs können einen in den Wahnsinn treiben, vor allem wenn man dadurch am eigenen Code zweifelt und ganze Web-Projekte für die Fehlersuche auf links dreht.

Links

http://robertnyman.com/2009/05/26/serious-memory-leak-issue-with-24-bit-png-images-with-alpha-transparency-in-internet-explorer/