sIFR Probleme beim Scrollen im Internet Explorer 6 und 7

1 minute read

sIFR Probleme beim Scrollen im Internet Explorer 6 und 7 thumb image

Wie schon in einem vergangenen Artikel bemerkt, gibt es immer noch Probleme im Einsatz mit sIFR – ein hartnäckiges Problem und ein absoluter Blocker im IE ist das Verhalten von sIFR-Überschriften mit transparentem Hintergrund.

Eine kurze Erklärung: [der Sachverhalt bezieht sich auf sIFR 3 Revisionen bis 405]

Beschreibung des Fehlverhaltens / Voraussetzungen

Nutzt man den transparenten Hintergrund von sIFR-Überschriften (in der replace-Methode wmode: „transparent“ übergeben) so kann man im Internet Explorer, sobald sich der Mauszeiger über einer der per sIFR ersetzten Überschriften befindet, die Seite nicht mehr scrollen. Der Flash-Film entzieht dem document irgendwie den Fokus, welcher sich dann im Flash-Film selbst befindet – alle Events kommen somit nicht mehr im document der Seite an.

Dieses Problem tritt nur im Internet Explorer (6/7) auf. In anderen Browsern wie Firefox, Safari, Opera gibt es damit keine Probleme.

Wichtig: Setzt man den wmode-Parameter auf window (oder eben gar nicht), so tritt der Bug nicht auf, aber der Hintergrund der Überschriften wird mit einer Farbe gefüllt. Man sollte sich vorher überlegen, ob die Transparenz unbedingt nötig ist, da auch einige Performanceprobleme mit transparenten Flash-Filmen auftreten können – insbesondere wenn viele Überschriften mit sIFR ersetzt werden.

Dirty Workaround

Sofern sich die Überschriften immer am selben Platz befinden und nicht durch DHTML verschoben werden (z.B. durch ein Akkordeon-Effekt) und die Überschriften nicht klickbar sein müssen, gibt es einen Weg um Scrollen auf der Seite zu ermöglichen.

Die Idee

Lege über jede ersetzte Überschrift einen DIV-Layer, mit statischer Position und Breite/Höhe der sIFR-Überschrift. Somit kann das Flash-Objekt den Fokus nicht mehr stehlen.

Umsetzung

Dazu nutzt man den onReplacement-Callback der als Parameter an die replace-Methode übergeben werden kann (siehe Dokumentation).

onReplacement (Function) Event handler which fires when an element has been replaced. It’s argument is a FlashInteractor object

Anhand dieses Callback kann man pro ersetzter Überschrift JS Code ausführen. In Pseudocode:

onReplacement: function(obj){
    if(ie){
         var tmpSize = getSize(obj.ancestor);
         var tmpPos = getPos(obj.ancestor);
    
         //create Div with size/pos from above with position absolute
         var bogusLayer = new Element("div").setPos(tmpPos).setSize(tmpSize).setPositionMode("static");
         bogusLayer.setOpacity(0.001);
    
         //insert div into dom, above the sifr-replaced object
         bogusLayer.injectAsFirstElement(obj.ancestor);
    }
}

Bis Mark Wubben einen wirklichen Workaround gefunden hat, ist dies eine Möglichkeit den Bug zu umgehen.

Comments

Leave a comment — Edit this page on github and issue a PR for your comment please. HowTo?