モバイルブラウザで「position:fixed」が正しく動作しないのはなぜですか?どうすれば修正できますか?

モバイルブラウザでは固定位置が機能しない

position:fixed プロパティは、ページがスクロールするときに画面上で要素を固定したままにする必要がありますが、 iOS や Android などの古いバージョンのモバイル ブラウザでは期待どおりに動作しない可能性があります。この問題を解決するには、-webkit-backface-visibility: hidden プロパティを利用します。

-webkit-backface-visibility プロパティは、背面をレンダリングするかどうかを決定することにより、要素のレンダリング パフォーマンスを最適化するために使用されます。要素の面。これを非表示に設定すると、ブラウザーは要素の背面を非表示にするように指示され、位置の問題が解決されます: 正しく機能しないことが修正されました。

このプロパティの使用方法を示す例は次のとおりです:

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

-webkit-backface-visibility: hidden; を追加することで、 CSS に対して、固定クラスを持つ要素は、古いバージョンの iOS および Android ブラウザでも画面上に固定されたままになります。

以上がモバイルブラウザで「position:fixed」が正しく動作しないのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。