[解決済み] モバイルブラウザでCSS3 100vhが一定でない
質問
非常に奇妙な問題があります...すべてのブラウザとモバイル版で、この動作に遭遇しました。
- すべてのブラウザで、ページを読み込んだときにトップメニューが表示され(たとえばアドレスバーが表示される)、ページをスクロールし始めるとスライドアップされます。
- 100vh 時々 はビューポートの可視部分のみで計算されるので、ブラウザバーを上にスライドさせると、100vhが(ピクセル単位で)増加します。
- 寸法が変更されたため、すべてのレイアウトの再描画と再調整が必要です。
- ユーザーエクスペリエンスに悪影響を及ぼす飛び跳ね効果
どうすればこの問題を回避できるのでしょうか?最初にviewport-heightを聞いたとき、私は興奮し、javascriptを使用する代わりに固定高さのブロックにこれを使用できると思いました。
で問題点を確認することができます。 サンプルサイト
どなたか、CSSによる解決策を提案していただけませんか?
簡単なテストコードです。
/* maybe i can track the issue whe it occours... */
$(function(){
var resized = -1;
$(window).resize(function(){
$('#currenth').val( $('.vhbox').eq(1).height() );
if (++resized) $('#currenth').css('background:#00c');
})
.resize();
})
*{ margin:0; padding:0; }
/*
this is the box which should keep constant the height...
min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
min-height:100vh;
position:relative;
}
.vhbox .t{
display:table;
position:relative;
width:100%;
height:100vh;
}
.vhbox .c{
height:100%;
display:table-cell;
vertical-align:middle;
text-align:center;
}
<div class="vhbox" style="background-color:#c00">
<div class="t"><div class="c">
this div height should be 100% of viewport and keep this height when scrolling page
<br>
<!-- this input highlight if resize event is fired -->
<input type="text" id="currenth">
</div></div>
</div>
<div class="vhbox" style="background-color:#0c0">
<div class="t"><div class="c">
this div height should be 100% of viewport and keep this height when scrolling page
</div></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
解決方法は?
残念ながら、これは意図的なものです...。
これはよく知られた問題で(少なくともサファリモバイルでは)、他の問題を防ぐために意図的に行われているものです。 Benjamin Poulain が webkit のバグに返信しました。 :
<ブロッククオートこれは完全に意図的なものです。この効果を得るためには、私たちの側でかなりの努力が必要でした。)
基本的な問題は、スクロールすると可視領域が動的に変化することです。CSSのビューポートの高さをそれに合わせて更新すると、スクロール中にレイアウトを更新する必要があります。見た目が悪いだけでなく、60 FPSでこれを行うことは、ほとんどのページで事実上不可能です(60 FPSはiOSのベースラインフレームレートです)。
この「クソみたいな感じ」の部分をお見せするのは難しいのですが、スクロールするとコンテンツが移動して、画面に表示したいものがどんどん移っていくのを想像してみてください。
高さを動的に更新することはうまくいかず、iOSのビューポート単位を落とすか、iOS 8以前のようにドキュメントサイズに合わせるか、小さいビューサイズを使うか、大きいビューサイズを使うか、いくつかの選択肢がありました。
私たちが得たデータでは、大きい表示サイズを使用することが最良の妥協点でした。ビューポートユニットを使用しているほとんどのウェブサイトは、ほとんどの場合、美しく表示されていました。
Nicolas Hoizeyがかなり研究しています。 https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
修正予定なし
現時点では、モバイル端末でのビューポートハイトの使用を控える以外、できることはあまりありません。Chromeも2016年にこれに変更されました。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] 同じ要素にbackground-imageとCSS3グラデーションを組み合わせるにはどうすればよいですか?
-
[解決済み] ローカルストレージとCookieの比較
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] CSSで背景画像を幅に合わせ、高さは比例して自動縮小する
-
[解決済み】Divの高さが100%で、コンテンツに合わせて拡大される。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] CSSでテキストを垂直方向にセンタリングするには?[重複しています]
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか?
-
[解決済み] Flexbox:水平方向と垂直方向の中央揃え
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?
-
[解決済み] テーブル内のテキストアラインクラス
-
[解決済み] メモ帳++でXML/HTMLを自動整形/インデントする方法
-
[解決済み] CSSでdivを縦にスクロールできるようにする
-
[解決済み] HTMLのdiv要素とspan要素の違いは何ですか?