Warum funktioniert Position: Fixed nicht in älteren mobilen Browsern?

Position behoben funktioniert im mobilen Browser nicht

Problem:

Die Position eines Elements mithilfe der CSS-Funktion „position: behoben“ fixieren funktioniert möglicherweise nicht in älteren Versionen von mobilen iOS- und Android-Browsern. Das Element scrollt mit der Seite und ignoriert die feste Positionierung.

Ursache:

ältere Browser wie iOS < 5 und Android < 4 unterstützen die Position nicht vollständig: feste Eigenschaft.

Lösung:

Verwenden Sie -webkit-backface-visibility: versteckt;

Diese CSS-Eigenschaft zwingt den Browser, das Element als 3D-Element zu behandeln, was die feste Positionierung ermöglicht.

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

Beispielcode:

  Hi I m Position Fixed


  sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text

Diese Lösung wurde getestet und funktioniert reibungslos in den meisten mobilen Browsern, einschließlich älteren Versionen von iOS und Android.
Das obige ist der detaillierte Inhalt vonWarum funktioniert Position: Fixed nicht in älteren mobilen Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!