Warum funktioniert „Position: behoben' in mobilen Browsern nicht richtig und wie kann ich das Problem beheben?

Position behoben funktioniert im mobilen Browser nicht

Während die Eigenschaft „Position: Fest“ ein Element beim Scrollen der Seite auf dem Bildschirm fixiert halten sollte, In älteren Versionen mobiler Browser wie iOS und Android funktioniert es möglicherweise nicht wie erwartet. Um dieses Problem zu lösen, können wir die Eigenschaft -webkit-backface-visibility:hidden verwenden.

Die Eigenschaft -webkit-backface-visibility wird verwendet, um die Rendering-Leistung eines Elements zu optimieren, indem bestimmt wird, ob die Rückseite gerendert werden soll Fläche des Elements. Durch die Einstellung „Ausgeblendet“ wird der Browser angewiesen, die Rückseite des Elements auszublenden, wodurch das Problem behoben wird, dass „position: behoben“ nicht ordnungsgemäß funktioniert.

Hier ist ein Beispiel, das zeigt, wie diese Eigenschaft verwendet wird:

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

<code class="html"><div class="fixed">
  Hi I m Position Fixed
</div>
<div>
  sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />sample text<br />
</div></code>

Durch Hinzufügen von -webkit-backface-visibility: versteckt; Gemäß CSS bleibt das Element mit der festen Klasse auch in älteren Versionen von iOS- und Android-Browsern auf dem Bildschirm fixiert.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „Position: behoben' in mobilen Browsern nicht richtig und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!