1. ホーム
  2. html

[解決済み] モバイルブラウザでCSS3 100vhが一定でない

2022-03-22 10:32:49

質問

非常に奇妙な問題があります...すべてのブラウザとモバイル版で、この動作に遭遇しました。

  • すべてのブラウザで、ページを読み込んだときにトップメニューが表示され(たとえばアドレスバーが表示される)、ページをスクロールし始めるとスライドアップされます。
  • 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年にこれに変更されました。