Responsive Grafiken: Merkwürdige Bugs

So langsam ist Responsive Webdesign ja fast ein alter Hut. Wer sich nicht erst seit gestern damit befasst, hat die wichtigsten Techniken mittlerweile verinnerlicht, so zum Beispiel die fluid images nebst Ergänzung. In CSS-Code sieht das dann so aus:

img {
    height: auto;
    max-width: 100%;
}

Das Ganze ergänzt man ggf. noch um eine serverseitige Skalierung von Grafiken – z.B. mittels Adaptive Images – und fertig. Nein, nicht unbedingt.

Wir bemühen uns natürlich ganz zeitgemäß, (Raster-)Grafiken nur noch da einzusetzen, wo sie nicht zu vermeiden sind, etwa für Logos oder Fotos. Icons kann man mittlerweile sehr gut über Iconfonts erzeugen, Verläufe viel flexibler über CSS3 mittels linear-gradient und auch Image-Replacement sieht man dank Webfonts kaum noch.

Spaß mit Javascript

Unterhaltsam (auch in Sachen Debugging) kann es werden, wenn Javascript ins Spiel kommt. Verwenden z.B. jQuery-Plugins über das img-Element eingebundene Grafiken, wird das pauschale Styling aus dem oben gezeigten Codebeispiel natürlich auch auf diese angewendet. Mitunter kommt man dann aber nicht direkt darauf, dass CSS für die resultierenden Bugs verantwortlich ist – wenn Javascript im Spiel ist, liegt die Vermutung näher, dass damit etwas nicht stimmt.

Mir sind bislang zwei Fälle begegnet, in denen genau das der Fall war und in denen die damit verbundenen Darstellungsfehler nicht so ganz offensichtlich waren.

Google Maps mit jQuery-gMap

jQuery-gMap ist ein beachtlich schlankes, sehr flexibles jQuery-Plugin, welches das Einbetten von Google Maps relativ schmerzfrei macht. Die Steuerungselemente einer Karte sind dabei z.T. img-Elemente. Erhalten diese max-width: 100%, sieht die Karte fast ein wenig aus, also könnten diese Rastergrafiken nicht korrekt geladen werden, wie der folgende Screenshot zeigt:

Lösung: img-Elemente innerhalb der Karte erhalten max-width: none.

(Interessanterweise tritt der Effekt nicht auf, wenn man den HTML-Code zum Einbetten in eine Website – mittels iframe – verwendet, den Google Maps vorgibt, da dabei die entsprechenden Grafiken über Inline-CSS feste Breiten zugewiesen bekommen.)

Lightbox mit Colorbox

Auch Lightbox-Skripte wie Colorbox können (ich habe es bislang nur mit diesem speziellen Plugin getestet) merkwürdig auf max-width: 100% reagieren. Im Fall von Colorbox tritt der Bug nur im IE8 auf (nicht aber im IE7) und ist schwierig zu beschreiben – die Lightbox öffnet sich vermeintlich normal, klappt jedoch umgehend zusammen, als habe das Lighbox-Overlay eine Breite von null Pixeln zugewiesen bekommen.

Lösung: Die in der Colorbox angezeigte Grafik erhält max-width: auto. Das Elternelement dazu ist #cboxLoadedContent – sollte dieser Effekt auch in anderen Lighboxen auftreten, muss der Code natürlich angepasst werden.

Alternativ könnte man natürlich nur solchen Grafiken den „fluid img“-Code zuweisen, die ihn ausdrücklich erhalten sollen (etwa über eine Klasse), das dürfte aber in den meisten Fällen umständlicher sein als zwei Ausnahmeregeln zu schreiben.