Pourquoi « position : fixe » ne fonctionne-t-il pas correctement dans les navigateurs mobiles et comment puis-je y remédier ?

Position fixe ne fonctionne pas dans le navigateur mobile

Alors que la propriété position : fixe doit garder un élément fixe à l'écran pendant que la page défile, cela peut ne pas fonctionner comme prévu dans les anciennes versions des navigateurs mobiles comme iOS et Android. Pour surmonter ce problème, nous pouvons utiliser la propriété -webkit-backface-visibility: Hidden.

La propriété -webkit-backface-visibility est utilisée pour optimiser les performances de rendu d'un élément en déterminant s'il faut restituer l'arrière-plan. face de l’élément. En le définissant sur masqué, le navigateur est invité à masquer la face arrière de l'élément, ce qui résout le problème de position : fixe qui ne fonctionne pas correctement.

Voici un exemple qui montre comment utiliser cette propriété :

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

En ajoutant -webkit-backface-visibility: Hidden; au CSS, l'élément avec la classe fixe restera fixe à l'écran même dans les anciennes versions des navigateurs iOS et Android.

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!