Viele Websites beinhalten Seiten, die vom Grundaufbau/Layout her völlig identisch aussehen. D.h., sie beinhalten viele begrenzende oder Hintergrunds-Elemente, die auf allen Seiten völlig gleich aussehen.
Bei einem Wechsel zwischen zwei Seiten erwartet man dann, dass die identisch aussehenden Seitenelemente während des Wechsel ohne jedes Flackern dargestellt werden. Der Wechsel soll für das Auge des Betrachters also so ablaufen, als ob nur die unterschiedlichen Seitenanteile im Wechsel neu aufgebaut werden. Die identisch aussehenden Elemente sollen beim Seitenwechsel dagegen als völlig statisch erscheinen. Es soll vor allem zu keinem Flackern beim Seitenaufbau kommen. Flackereffekte (kurzzeitige Hell-Dunkel-Wechsel in bestimmten Seitenbereichen) wirken auf die meisten Betrachter irritierend.
Leider stellt man aber immer wieder fest, dass es gerade bei komplexeren Seiten im MS IE zu diesem unangenehmen Flackern kommt – oft genau in den Bereichen, die beim Seitenwechsel eigentlich unverändert bleiben. Dagegen kann man bei Browsern wie Firefox, Opera, Konquerer oft einen stabilen, flackerfreien Bildwechsel während des Renderns der neuen Seiten konstatieren. (Ausnahmen stellen Seiten dar, die Flash-Elemente beinhalten.) Wir haben das Problem schon des öfteren mit gewöhnlichen HTML-Seiten, aber auch im Zusammenhang mit PHP-Seiten festgestellt.
Wie kann man als Entwickler das nervige Flackern im MS IE in den Griff bekommen ?
Hierfür gibt es nach unserer Erfahrung mindestens zwei Tricks:
Trick 1: MS IE spezifisches Metatag
Im MS IE kann man den Seitenwechsel mit (teils spektakulären) Effekten unterlegen, die eine bestimmte Zeitdauer haben. Die Render-Engine arbeitet in diesem Modus anders als gewöhnlich. Wir nutzen das an dieser Stelle zur Vermeidung des Flackerns aus. Zur Parametrierung der Effekte dient ein Metatag der folgenden Form
<meta http-equiv=”Page-Enter” content=”revealtrans(duration=0.1,transition=5)” >
Der Parameter “duration” gibt die Zeitdauer des Effektes in Sekunden an, der Parameter “transition” den ausgewählten Effekt. In unserem Fall wird die Seite von oben nach unten aufgebaut (abgerollt) – die Zeitdauer ist allerdings so kurz gewählt, dass man das praktisch nicht merkt. Der von uns gewünschte Seiteneffekt ist allerdings der, dass ein Seitenwechsel nun in vielen Fällen völlig stabil und ohne jedes Flackern vor sich geht.
Weitere Information zu “revealtrans” findet man im Internet.
Trick 2: Einbau von Dummy-DIVs mit einer Opacity-Anweisung
Auch wenn man auf einem Layer der Webseite mit hohem z-Index ein Dummy-DIV mit einer Opacity-Vorgabe integriert, reagiert die Render-Engine des MS IE positiv im Sinne der Flackerfreiheit. Ein Element der Form :
<div style=”position:absolute; width:0.5em; height:0.5em; top:0.1em; left:0.1em; filter: alpha(opacity=66); -moz-opacity: .66; opacity: .66; z-index:10;”></div>
ist an sich zwar völlig sinnlos (da ohne Hintergrundsfarbe), zieht aber dennoch die Flackerfreiheit des Seitenaufbaus nach sich. (Ausschlaggebend für den MS IE ist dabei übrigens die “filter”-Anweisung.)
Viel Spass in Zukunft beim “Beruhigen” des MS IE.
Nachtrag am 18.11.2009:
Im Falle von Hintergrundsbildern, die per CSS in Tags eingebunden werden, helfen die obigen Tricks in der Regel nichts. Siehe aber die Hinweise von Anne zu weiteren Möglichkeiten im Kommentar ! Danke, Anne !
Nachtrag am 28.11.2009
Anne hat mich darauf aufmerksam gemacht, dass beim MS IE in vielen Fällen auch der unauffällige Einbau eines kleinen Dummy-Flash-Films, der eigentlich nichts tut, zur Stabilisierung des Bildaufbaus und zur Vermeidung von Flackereffekten hilft. Wegen evtl. Schwierigkeiten mit Flash-Filmen in Gecko/Mozilla-Browsern ist das aber kein Trick, den man generalisieren könnte.
Interessant ist auch, dass im Moment das
gleichzeitige Öffnen mehrer Tabs mit Webseiten, die per SWFObjects 2.x eingebaute Flashfilme beinhalten, im Firefox zu Flackereffekten beim Seitenwechsel führt – zumindest unter Linux. Es ist ein Leiden !
Ferner hat mich Anne mit einigen Beispielen, bei denen im BODY-Tag Hintergrundsbilder per CSS verankert wurden, davon überzeugt, dass es im MS IE (alle Versionen) manchmal sogar von Nachteil sein kann, den “revealtrans”-Effekt einzusetzen. Besser ist es da anscheinend, das Bild, das man im Body-Tag untergebracht hat, nochmal in Form eines gewöhnlichen IMG-Tags in einem DIV zu hinterlegen, das man per z-index unter allen anderen Seitenelementen einfügt.
OK, OK, ich gebe auf – es gibt keine Standardrezepte – man muss halt herumexperimentieren.
Wenn man Zeit hätte, könnte man ja die Sache mal systematisch untersuchen – Seitenwechsel bei vorhandenen Hintergrundsbildern, beim Vorhandensein von Flash und das in allen gängigen Browsern unter Linux und MS Windows. Ach ja, man müßte dann auch noch die unterschiedlichen Arten der Einbindung von Flashfilmen berücksichtigen …..