Weblogeintrag vom 8. November 2005

Tuesday, 2005-11-08 22:41

CSS-Bits, heute: Vermeide transparente Hintergrundbilder. Die Seite von René Pönitz bietet seit einiger Zeit ein zweites Design, dass sich in allen Opera-Versionen durch sein grauenvolles Scrollverhalten auszeichnet. Zuerst dachte ich, daran wären das mit 1 × 1 Pixel extrem klein gewählte Format der Hintergrundgrafiken schuld. René setzt diese ein, um transparente Flächen zu erzeugen, die ansonsten nur mit der CSS-Eigenschaft opacity, die kein Browser unterstützt (von ~~-moz-opacity~~ Firefox und Safari einmal abgesehen) realisierbar wären. Meine neuerlichen Versuche – ich stolperte über den selben Bug – zeigten, dass die Größe der Grafiken unerheblich ist. Opera verschluckt sich ganz einfach, wenn gekachelte Hintergrundgrafiken Transparenzinformationen enthalten. Das Blättern, sichtbar vor allem bei Verwendung des Mausrads, frisst bis zu 99% Rechenleistung und führt zu sichtbarem Ruckeln. Dabei ist unerheblich, ob es sich um Paletten- oder echte Alphatransparenz handelt. In anderen Browsern wie z.B. Firefox tritt das Problem nicht so massiv auf, messbare Unterschiede gibt es dort jedoch auch. Fazit: Bei gekachelten Bildern sollte Transparenz vermieden und statt dessen wann immer möglich die Hintergrundfarbe eingesetzt werden.

2005-11-08 23:09: wobei mein Eindruck vom neuen Layout eher der ist, daß Opera noch am wenigsten ruckelt, zumindest war FireFox eine Stufe schlimmer. In diesem Fall kommt erschwerend hinzu, daß viele Halbtransparenzen übereinander liegen. Aber daran habe ich beim Erstellen nicht gedacht, somit ist es nur noch ein experimentelles Layout ;-); René
2005-11-11 00:08: Ist wirklich nicht schön, zumal man als normaler Nutzer der Seite nicht ansehen kann, warum das beim Scrollen so ruckelig ist.; Crest
2005-11-16 22:25: Zum Thema opacity und nicht unterstützt.

Konkret ausprobiert habe ich es zwar nicht, aber ich meine eine Seite gesehen zu haben (ka wo und wann) die opacity verwendete (nicht -moz-opacity und Konsorten) welches im Firefox 1.5 unterstützt wurde.; Aarakast
2005-11-21 14:51: -moz-opacity sollte erst dann in opacity umbenannt werden, wenn das CSS3-Color-Modul die Entwurfsphase verlassen hat. Das ist tatsächlich (und zu meinem Erstaunen) seit Mai 2003 bzw. seit Firefox 0.9 der Fall.; Thiemo

Kommentare zu diesem Beitrag können per E-Mail an den Autor gesandt werden.

Thiemos Archiv