Pourquoi Position : Fixe ne fonctionne-t-il pas dans les navigateurs mobiles et comment puis-je y remédier ?

La position fixe ne fonctionne pas dans les navigateurs mobiles

Contexte

Les développeurs Web rencontrent souvent des difficultés lorsqu'ils tentent de positionner des éléments corrigés dans les navigateurs mobiles. La propriété CSS position:fixed permet aux éléments de conserver leur position même lorsque le contenu environnant défile. Cependant, cette fonctionnalité a historiquement posé problème dans les anciennes versions d'iOS et d'Android.

Problème

Dans les navigateurs mobiles comme les versions d'iOS antérieures à 5 et les versions d'Android antérieures à 4, la position : corrigée dysfonctionnements immobiliers. Les éléments attribués à cette propriété défileront toujours avec le contenu de la page, annulant ainsi l'effet de positionnement « fixe » prévu.

Solution

Pour résoudre ce problème, les développeurs expérimentés ont conçu une solution pragmatique qui fonctionne de manière cohérente. dans plusieurs navigateurs mobiles :

Utilisation de -webkit-backface-visibility : caché ;

La clé pour résoudre ce problème réside dans la propriété CSS -webkit-backface-visibility. En définissant ceci sur caché, nous forçons le navigateur à conserver la façade avant de l'élément. Cela l'empêche d'être obscurci ou influencé par le contenu sous-jacent, garantissant qu'il reste "fixé" à l'écran.

Exemple

Pour illustrer cette solution en action, considérons l'extrait de code suivant :

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

Lorsqu'il est appliqué à une page Web, ce code créera un rectangle rouge avec un positionnement fixe. Il restera au même endroit sur l'écran, même lorsque la page défile.

Remarque : Il convient de mentionner que cette solution résout principalement le problème sur les appareils iOS et Android. Pour les autres navigateurs, d'autres approches peuvent être nécessaires.

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!