ホームページ > 記事 > ウェブフロントエンド > モバイル端末で固定要素が表示されない問題の解決方法
モバイル端末で固定要素が表示されない問題の解決方法
- 不言オリジナル
- 2018-08-02 10:44:063029ブラウズ
この記事では、モバイル端末で固定要素が表示されない問題を解決する方法を紹介しますので、困っている方は参考にしていただければ幸いです。
過去数週間で会社のアプリ用にHTML5のネストされたページを作成しました。ページは複雑ではなく、下部にフッターがあります
HTMLの構造は次のとおりです
<style>
.main{
position: absolute;
top: 0;
bottom: 88px;
left: 0;
width: 100%;
overflow-y: auto;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
<style>
<body>
<div class="main">
...
</div>
<footer></footer>
</body>
。コンテンツのデバッグが完了し、他のプロジェクトがいくつか挿入されました。その後、アプリ開発者からページのスクロールを監視するように言われ、位置決めレイアウトを使用しないように求められました。ページ上に入力用の場所がなく、固定要素が走り回ることがないことがわかります。そこでメイン部分を通常のレイアウトに変更しましたが、その後バグが発生しました:
Android ではすべて正常ですが、IOS10 では、ページに入るときにフッターが表示されず、ドラッグまたはダブルクリックした後にのみ表示されることがあります。 (他のバージョンの IOS テストでは、正常であると報告されています)
この問題が発生したときに最初に考えられるのは、フッターの Z インデックスを増やして 1000 に設定することですが、結果は役に立ちません。表示されないページの内容が非常に短く、フッターの位置に達していないことに注意してください。これは、ボディの高さに問題があると思われます。ボディにスタイルのデバッグを追加しました
background: #fafafa; min-height: 100vh;
。確かにページ全体が灰色になりましたが、フッターはまだ表示されません
同僚と話し合った結果、携帯電話のレンダリングに階層的な問題があるのではないかと推測しました。クリックまたはタッチ移動しても、最初はページが表示されませんでした。 -フッターをレンダリングしましたが、正常でした。
当時はほぼオンラインで問題なくバグを解決するために、フッターにtanslateZを設定しました
-webkit-transform: translateZ(1px) transform: translate(1px)
ページ上に弾性レイヤーもあります。 z-index が設定されており、フッターにはtranslateがあります。弾性レイヤーではカバーできません。これは、tranzlateZ レベルが高いことを示しています。弾性レイヤーをtranslateZ(2px)に設定すれば正常になります
この方法はあまりエレガントではありませんが、レイアウトが変更されず、緊急時にも適用できるという利点があります
おすすめ関連記事:
神聖CSSでの聖杯レイアウトと二重飛行翼レイアウトの紹介（コード付き）
CSSでフローティング要素の行折り返しを実装する方法以上がモバイル端末で固定要素が表示されない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。