Position:Fixed が古いモバイル ブラウザーで機能しないのはなぜですか?

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

問題:

CSS の位​​置を使用して要素の位置を固定する: 修正済み古いバージョンの iOS および Android モバイル ブラウザでは動作しない可能性があります。この要素は、固定位置を無視して、ページとともにスクロールします。

原因:

iOS などの古いブラウザ

5 および Android

解決策:

Use -webkit-backface-visibility: hidden;

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

この CSS プロパティは、ブラウザーに要素を 3D 要素として強制的に処理させ、固定位置を有効にします。

<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/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
</div></code>

サンプル コード:

このソリューションはテスト済みで、古いバージョンの iOS や Android を含むほとんどのモバイル ブラウザでスムーズに動作します。

以上がPosition:Fixed が古いモバイル ブラウザーで機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。