IE7, bicubic interpolation - nicht immer!

27.5.2008 von rmo.

Im Internet kann man feststellen, dass viele Microsoft Fans begeistetr darauf reagiert haben, dass der IE7 mit Opera bzgl. der Skalierung von Webseiten und Ihrer Inhalte gleichgezogen hat. Ein Schlagwort in diesem Zusammenhang ist die bikubische Interpolation - für Numeriker und Physiker ein uralter Hut, mit dem jetzt halt auch Browser ausstaffiert werden.

Dagegen gibt es an und für sich nichts zu sagen. In der Praxis kann man aber das Verfahren der bikubischen Interpolation nicht immer “blind” einsetzen, und leider ist die Implementierung von MS auf den zweiten Blick auch nicht intelligent genug. Ein schönes Beispiel hatten wir vor kurzem, als wir auf einer Webseite Bilder aneinander gereiht haben, die vom Bildinhalt her nahtlos ineinander laufen. Realisierung z.B. mit Container-DIV und gefloateten Images. Nun möchte man diese Nahtlosigkeit gerne auch im Browser sehen - und dort auch nach einer Skalierung des gesamten Seite (Strg +).

Ergebnis in Opera: Kein Problem.
Ergebnis im IE7: In der Normalansicht (keine Skalierung) kein Problem. Bei einer Vergrößerung der Browseransicht mit “Strg +” wird aber offenbar jedes Bild einzeln bikubisch interpoliert. Dies führt im Ergebnis zu klar erkennbaren Rändern und manchmal sogar transparenten Zwischenräumen zwischen den Bildern. Das Hindurchschimmern des Hintergrundes kann man durch “margin:-1px” künstlich beheben. Die durch die Interpolation erzeugten minimalen Randstreifen jedes Bildes verschwinden jedoch nicht.
Ganz schlimm wird die Sachen, wenn die Bilder in einzelnen aneinander grenzenden Tabellenzellen untergebracht werden - obwohl die Bilder die Zellen ausfülllen, cellspacing, cellpadding, border auf 0 bzw. im Falle von CSS “border-collapse” etc. richtig gesetzt sind.

Das wird z.B. dann sehr unangenehm, wenn man Bilder verwendet, um den Rand eines Bereichs schön zu gestalten - z.B. mit abgerundeten Ecken. Die auftretenden Streifen zwischen den Bildern trüben die mühsam erarbeiteten Effekte sehr.

Woran liegt das? Nun, MS interpoliert die Bildern anscheinend einzeln. Bikubische Interpolationen sind an (scharfen) Rändern problematisch (Überschwingen). Hier muss man mit der Vorgabe der Randwerte aufpassen und den Rand ggf. einer Sonderbehandlung unterziehen, oder in der Nähe des Randes das Interpolationsverfahren wechseln. In der Regel der Vergleich mit Umgebungsdaten außerhalb des Randes. Im MS IE7 wird das leider nicht automatisch gemacht.

Es gibt aber eine Lösung:
Microsoft hat mit der Einführung der bikubischen Interpolation dem Anwender die Möglichkeit gelassen, per CSS-Anweisung auch ein anderes Interpolationsverfahren zu wählen. So gibt es zwei mögliche MS-spezifische CSS-Anweisungen:

-ms-interpolation-mode:bicubic
oder
-ms-interpolation-mode:nearest-neighbor

Bei Bildern, die man also auch nach einem Strg + nahtlos und ohne Randeffekte aneinandergehängt sehen möchte, muss man dem -Tag der aneinandergrenzenden Bilder halt ein
style=”-ms-interpolation-mode:nearest-neighbor” mitgeben. Dann funktioniert die Sache - leider auf Kosten der Interpolationsqualität.

Geschrieben in LAMP / Webentwicklung | Keine Kommentare »