it-swarm.com.de

Position auf Chrome mobile fixiert, wodurch das Element beim Scrollen nach oben/unten verschoben wird

Ich stehe vor diesem seltsamen Problem, das auf Chrome Mobile wie ein Fehler aussieht.

Ich habe ein div mit position: fixiert; in der oberen rechten Ecke des Bildschirms ausgerichtet. Auf dem Desktop funktioniert es einwandfrei (es bleibt an Ort und Stelle), in Mobile bewegt sich das div jedoch, wenn ich nach oben oder unten scrolle. Ich habe ein Video gemacht, um es besser zu erklären:

https://www.youtube.com/watch?v=gCgN6ULkcMg

 scroll up

Aufwärts scrollen funktioniert gut

 scroll down

beim Scrollen nach unten verschwindet ein Teil des div mit position: fixed außerhalb des Viewports

Ich habe versucht, das Problem auf einer Geige zu isolieren, konnte es aber nicht reproduzieren. Also habe ich die gesamte Website in eine Geige gekapselt und das Problem hörte auf. Ich habe immer noch nicht verstanden warum.

Website in einer Geige isoliert: Entfernt *

Live-Website: Entfernt *

Außerdem habe ich einige Tests auf verschiedenen Geräten auf der Live-Website durchgeführt:

  • Chrome Mobile: Bugs
  • Chrome-Desktop: Works fine
  • Firefox-Handy: Funktioniert gut
  • Safari Mobile: Funktioniert gut

Kann mir jemand erklären, warum Chrome Mobile dieses Problem hat, während die anderen dies nicht tun?

Meine Position: Fixed div sieht ungefähr so ​​aus:

div {
  position:fixed;
  top:10px;
  left:0;
  width:100%;
  text-align:right;
}

* Die Links wurden entfernt, da es sich um eine Website eines Kunden handelt. Die Lösung ist in der Antwort unten.

17

Ich fand heraus.

Aus irgendeinem gottverlassenen Grund erfordert mein geliebtes Google Chrome auf dem Handy minimum-scale = 1 auf dem Viewport-Meta.

<meta name="viewport" content="minimum-scale=1">

Es funktioniert jetzt.

50

Das Problem ist mit meta tag, den Sie dort angeben müssen 

<meta name="viewport" content="height=device-height, 
                      width=device-width, initial-scale=1.0, 
                      minimum-scale=1.0, maximum-scale=1.0, 
                      user-scalable=no, target-densitydpi=device-dpi">

Dies liegt daran, dass Chrome browser height von viewport geändert wird. 

5
vAhy_The

Wenn Sie möchten, dass das Element oben auf der Seite beginnt und bleibt, versuchen Sie es mit 

    #header {
          position: sticky;
          top: 0;
    }

Das funktionierte nur für mich, zumindest in einer früheren Version von Chrome Desktop, wenn sich das Problem nicht richtig verhielt. Seien Sie sich jedoch bewusst, dass relativ positionierte Elemente klebrig positionierte Elemente nicht so ignorieren, wie sie es tun.

Ich bin mir nicht sicher, ob das helfen wird, aber es war die Antwort, nach der ich gesucht habe, als ich zu dieser Frage kam.

2
Travis Fleenor

Es ist gut zu überprüfen, ob etwas in Ihrem Ansichtsfenster hängt. Das Anpassen des Ansichtsfenster-Meta-Tags ist möglicherweise nicht erforderlich.

Wenn das klebrige Ding immer noch wackelt oder der Browser nur etwas mehr Zeit zum Atmen hat, sollten Sie Folgendes hinzufügen

transform: translate3d(0, 0, 0);

Dies wird Ihnen helfen, mein Freund: D Wenn Sie auch z-index verwenden, stellen Sie sicher, dass er immer angewendet wird.

0
rémy