14.12.2008
Manche Seiten "ruckeln" im Firefox 3
Trotz eines einheitlichen Designs "springen" oder "ruckeln" manche Seiten in bestimmten Browsern, so z.B. im Firefox.
Dieses Phänomen könnt ihr mit dem Firefox in folgender Demo nachvollziehen.
Die ersten drei Seiten haben eine vollkommen identische HTML- und CSS-Struktur, ihr Inhalt befindet sich jeweils in einem zentrierten Container. Lediglich bei Seite vier, die inhaltsmäßig der Seite drei entspricht, wurde der CSS-Code geringfügig verändert.
Das "Ruckeln" tritt jedoch immer nur im Zusammenhang mit der Seite 3 auf, nämlich wenn diese geöffnet wird, oder wenn man von Seite 3 aus auf eine andere Seite wechselt.
Wer sich die Seiten im Firefox näher betrachtet wird feststellen, dass der Inhalt von Seite 3 kürzer ist und die Seite 3 deshalb keinen Scrollbalken hat. Hierdurch fehlen im Bildschirmfenster einige Pixel an Scrollbalkenbreite. Das Gesamtfenster (Viewport) wird geringfügig breiter und der zentrierte Inhalt rückt minimal nach rechts.
Der gleiche Effekt tritt umgekehrt auf, wenn die Seiten 1, 2 und 4 einen Scrollbalken haben und von Seite 3 aus geöffnet werden. Dann ist der Viewport um die Scrollbalkenbreite schmäler und der Inhalt rückt deshalb leicht nach links.
Eigentlich eine ganz logische Sache, jedoch mitunter etwas nervig für den Betrachter.
Die Lösung des Problems liegt nun darin, dass wir für den Firefox einfach einen "künstlichen" Scrollbalken erzeugen, der auch dann vorhanden ist, wenn er überhaupt nicht benötigt wird.
Zu diesem Zweck sorgen wir dafür, dass das html-Dokument einfach minimal etwas höher wird als das Browserfenster. Damit passt es nicht mehr vollständig in den Viewport und folglich bietet uns auch der Firefox einen Scrollbalken an.
Wir definieren also für html
html {height: 101%;}
Damit ist das Dokument um 1% höher als 100% Fenstergröße.
Die Seite 4 in der Demo ist vollkommen identisch mit der Seite 3, enthält jedoch zusätzlich noch diese Höhendefinition, wodurch der Scrollbalken im Firefox erzeugt wird.