Wie kann das Problem „Position behoben' in mobilen Browsern behoben werden?

Problem mit der Positionskorrektur in mobilen Browsern

Problem:
Die Positionskorrektur funktioniert nicht auf älteren Versionen von iOS und bestimmten Blackberry-Browsern , wodurch Elemente zusammen mit der Seite gescrollt werden.

Lösung:
Um dieses Problem zu beheben, fügen Sie die Eigenschaft -webkit-backface-visibility: versteckt hinzu das feste Element.

<code class="css">.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 50px;
  background: red;
  -webkit-backface-visibility: hidden; /* This is the fix */
}</code>

Erklärung:
Die Eigenschaft -webkit-backface-visibility steuert, wie ein Element angezeigt wird, wenn es sich vom Benutzer abwendet und ist standardmäßig nicht sichtbar. Wenn Sie es auf versteckt setzen, wird der Browser gezwungen, den gleichen Rendering-Kontext für das Element beizubehalten, wodurch verhindert wird, dass es durch Scrollen beeinträchtigt wird.

Beispiel:

<code class="html"><div class="fixed">
  Hi I'm Position Fixed
</div>
<div>
  <!-- Sample text -->
</div></code>

Durch Anwenden der Eigenschaft -webkit-backface-visibility:hidden auf das feste Element können Sie sicherstellen, dass das Element an der gleichen Position auf dem Bildschirm bleibt, auch in iOS- und Blackberry-Browsern, wo sich die Position befindet behoben wird nicht vollständig unterstützt.

Das obige ist der detaillierte Inhalt vonWie kann das Problem „Position behoben' in mobilen Browsern behoben werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!