Fixed headerBlock: Problem bei iOS/ Android

[kukki]

Eigentlich ist mir das bis heute noch nicht so entscheidend aufgefallen. Bei der Umstellung einer Band-Website auf responsive (OHNE Bootstrap) war es in der Desktop-Version nicht zu bemerken:

ein ge"fixter" Header, mit drunter durchlaufenden mainBlock funktioniert unter Windows alle Mal - und crossbrowserkompatible. Aber: auf meinem älteren Testgerät, einem Touchlet X4 mit älterer Android-Version- deswegen nicht entsorgen - sah die Sache komisch aus, der headerBlock war verschwunden, auf meinem Panasonic-Handy sah alles super aus.

Dann fand ich nach einiger Suche den entscheidenden Hinweis:

Code: Select all

-webkit-backface-visibility: hidden;

Der Header muss damit ein wenig "behandelt werden", damit er auch auf diesen alten Geräten zu sehen ist

Code: Select all

left: 50%; /* bei 100% Breite reicht dann auch ein "0" */
margin-left: -512px; /* nur notwendig, wenn man eine selbstzentrierende Seite zusammengeschoben hat, ansonsten reicht mergin: 0;*/
position: fixed;
top: 0;
width: 1024px; /* gleiche Breite, wie mein containerBlock */
-webkit-backface-visibility:hidden; /*der entscheidende Fix ohne JScript!*/

angeblich soll das mit gefixten footerBlock ähnlich sein, dass konnte ich aber nicht feststellen, da funktionierte alles wie gewohnt.