Hat jemand Erfahrung mit mobilen Browsern?
Ein ganz simples Beispiel...
Ich möchte einen fixierten
header, der sowohl fixiert bleibt, wenn der
Content darunter die Fenstergröße überschreitet, als auch die
Fensterbreite.
Die Y - Achse selbst ist kein Problem.
Beim Scrollen in (Win)Browser bleibt der header fixiert.
Die X - Achse ist aber das Problem.
Beim Scrollen in (Win)Browser bleibt der header ebenfalls fixiert.
Beim Scrollen nach rechts im mobilen Browser schiebe ich das fixierte Element,
besser gesagt den Text darin, dann nach links aus dem Sichtfeld heraus. Der
header hat 100% der Fensterbreite, also auch dessen Hintergrund, aber er ist
eben
keines falls fixiert wie im Browser.
HTML-Code:
.header
{
background: #202020;
width: 100%;
position: fixed;
top: 0;
left: 0;
color: #fff;
}
<div class="header">
test
</div>
<div>
<div style="width: 2000px; height: 2000px;">123</div>
</div>
Das wäre das simpelste Beispiel, dass ich machen kann.
Im Browser ist der header auf X und Y - Achse fixiert.
Im mobilen Browser schiebe ich den Text "test" im header beim Scrollen
nach rechts, links aus dem Bild raus. Die Y - Achse ist okay.
Ich habe breits alle möglichen Tipps probiert und gesucht und gesucht
und keine Lösung für Android und iOS gefunden. Hat jemand einen Tipp?