Ein unfreundlicher Bug im Internet Explorer 6 - Das “hover-Flackern”, das unter gewissen Voraussetzungen immer dann auftritt, sobald für Links (oder für Elemente innerhalb von Links) via CSS Hintergrundbilder festgelegt worden sind. Vor allem die üblichen Techniken, mit denen man Text durch Bilder austauschen kann, sorgen dadurch je nach Einstellung des Besuchers für einen extrem “wackeligen” Eindruck.

 

Noch kein Flackern bemerkt?

Das liegt wohl an einer “ungefährlichen” Einstellung des Internet-Explorers. Um das Flackern auch mal “live” zu sehen, braucht man nur ein wenig an den Voreinstellungen zu schrauben:

  1. Internet Exlplorer starten
  2. Menü “Extras” / “Internetoptionen…” aufrufen
  3. Diese Eingabe-Maske sollte sich öffnen
    IE 6 Flackern - Einstellung 1
  4. Im Bereich “Temporäre Internetdateien” auf “Einstellungen” klicken
  5. Vermutlich wird diese Einstellung gewählt sein:
    IE 6 Flackern - Einstellung 2
  6. Einstellung folgendermaßen umändern:
    IE 6 Flackern - Einstellung 3
  7. Änderungen bestätigen, ein paar eigene Seiten checken -
    und da haben wir’s - Das “hover-Flackern”.

Das Flackern macht sich echt nicht gut: Sobald man sich mit dem Mauszeiger über einem Link befindet, in dem ein CSS-Hintergrundbild auftaucht, wird dieses neu geladen. Je nach Verbindungsgeschwindigkeit sieht man sogar noch “schön” die nette Sanduhr - die aufrichtige Begeisterung kennt keine Grenzen. Und Quelltexte, in denen man (was für Suchmaschinen schön ist) in etwa folgendermaßen das Logo durch ein Bild ausgetauscht hat …


<h1><a href="index.html" id="Logo">Name der Seite<span></span></a></h1>

… wirken auf einmal unausgereift - weil bei jedem Überfahren des Links das span mit dem Logo als Hintergrund-Bild erst einmal kurzfristig schlichtweg verschwunden ist.

 

Flackert immer noch nicht?

Glück gehabt. Denn dieser Bug, der nur mit der 6er-Version unseres Lieblings-Browsers auftritt, tritt zwar häufig, aber dann eben doch nicht immer auf. Damit es nicht flackert, müssen folgende Voraussetzungen erfüllt sein:

  • Das Element mit dem Hintergrundbild darf keine Hintergrundfarbe haben
  • Das Element mit dem Hintergrundbild muss eine bestimmte Größe (Länge in Pixel mal Breite in Pixel größer als 2.500) überschreiten
  • Das Hintergrundbild darf (auch nicht als “vererbte Eigenschaft) innerhalb des Elements keinerlei Positions- oder Ausrichtungs-Angaben haben
  • Ebenso dürfen dem Element mit dem Hintergrundbild auch keine Eigenschaften bezüglich der “Wiederholung” des Bildes gegeben werden

Aber alle (verlinkten) Logos, die eine gewisse Größe unterschreiten, alle Navigationen, bei denen die Links beispielsweise einen Pfeil oder ein sonstiges spezielles Hintergrund-Bild bekommen sollen und etliche andere mit CSS-Hintergrund-Bildern gestaltete Links flackern fröhlich vor sich hin.

Und es reicht leider nicht, sein Hintergrund-Bild durch “leere” Pixel zu vergrößern und die vergrößerten Bereiche wieder mittels overflow:hidden zu verstecken.

 

Weiterführende Informationen

Mehr Infos zum Thema “CSS-Flackern” mit vielen Live-Beispielen sind u.a. bei FiveSevenSix.com zu finden. Und da sollte auch deutlich werden, dass man dieses Flackern nicht ohne Weiteres abstellen kann.

(Hinweis: Geduld, die FiveSevenSix-Seite lädt bisweilen etwas langsam …)

Bei FiveSevenSix werden unterschiedliche Lösungen angeboten. Einige beziehen sich auf das Stylesheet (was je nach optischen Wünschen nicht immer klappen kann), andere auf die Server-Konfiguration (auf die nicht jeder Zugriff hat) oder auf die .htaccess-Datei (was bei meinen Seiten bisher leider nicht funktionieren wollte).

So musste also ein anderer Weg gefunden werden, um das “Flackern” zu beseitigen …

 

Lösung - Kein Flackern mehr mit JavaScript

Viel herumgesucht und vieles ausprobiert - Die einzige Methode, mit der ich das “Flackern” überall wirklich sicher unterbinden konnte, findet sich bei Mister-Pixel.com - Dort findet man ein paar Zeilen JavaScript, die man einfach nur in den Header-Bereich seiner Seite einfügen muss.

Und damit sollte das Problem Geschichte sein:


<script type="text/javascript">
<!--
try {
	document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
//-->
</script>

Damit wird zwar nicht verhindert, dass Hintegrundbilder, die eigentlich längst “bekannt” und damit im Cache sein sollten, bei anderen Pages derselben Website wieder neu geladen werden, jedoch findet das Hover-”Geflacker” beim Link-Überfahren so ein relativ sicheres Ende.

Jedenfalls sofern JavaScript zugelassen ist.