Comment résoudre le problème de « Position fixe » dans les navigateurs mobiles ?

Correction du problème de position résolu dans les navigateurs mobiles

Problème :
La position corrigée ne fonctionne pas sur les anciennes versions d'iOS et certains navigateurs Blackberry , provoquant le défilement des éléments avec la page.

Solution :
Pour résoudre ce problème, ajoutez la propriété -webkit-backface-visibility: Hidden à l'élément fixe.

<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>

Explication :
La propriété -webkit-backface-visibility contrôle la façon dont un élément apparaît lorsqu'il se détourne de l'utilisateur et n'est pas visible par défaut. Le définir sur caché force le navigateur à conserver le même contexte de rendu pour l'élément, l'empêchant ainsi d'être affecté par le défilement.

Exemple :

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

En appliquant la propriété -webkit-backface-visibility: Hidden à l'élément fixe, vous pouvez vous assurer que l'élément reste dans la même position sur l'écran, même dans les navigateurs iOS et Blackberry où la position fixe n'est pas entièrement pris en charge.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!