iOS Chromeがドキュメントの誤った高さを計算する

ページの高さ全体を埋めるために、私height: 100%;はhtmlタグとbodyタグに使用し、ブラウザーを閉じて再度開くまで正常に機能します。（モバイルデバイスの問題のため、100vhは使用しませんhttps://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html）

再現する手順：

• iPhoneのGoogle Chromeでhttps://angelika94.github.io/rick/を開きます（ナビゲーション（モーティとビール）がページの下部に配置されていることがわかります）ナビゲーション付きのCSS Rickのスクリーンショット
• ブラウザを閉じて、マルチタスクナビゲーションから削除します。https： //support.apple.com/en-us/HT201330
• ブラウザーを再度開きます（下部のナビゲーションが「最初の画面」から移動したことがわかります。今、それを表示するにはスクロールする必要があります） ナビゲーションのないcss Rickのスクリーンショット

これらの場合、ページは自動的に修正されます。

• 更新ページ
• デバイスを横向きに回転させます
• タブによるブラウザのナビゲーションの開閉
• マルチタスクナビゲーションでブラウザを閉じずに閉じて再度開く

なぜそれが起こるのですか？この動作を修正するにはどうすればよいですか？

前もって感謝します！

私はまったく別の問題を抱えていましたが、私が解決した解決策は、ページを更新すると修正されると述べたので、あなたの状況でもうまくいくと思います。

だから私はアンドロイドのクロムに問題があり、非常に速くスクロールすると（モバイルでは珍しくありません）、いくつかの要素が再/ペイントされないことがあります。どこでも解決策を探しましたが、うまくいくものを見つけることができませんでした。

最後に、私は実用的な修正を見つけました：

.pagewrap {
  transform: translateZ(0);
  animation-name: 'repaint';
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

@keyframes repaint {from { zoom: 99.99999%; } to { zoom: 99.99998%; }}

つまり、これにより、ページは3秒サイクルで継続的に再描画されます。

多分私はそれを微調整して、継続的にではなく、2秒ごとに1秒のほんの少しだけシフトする必要があります：

.pagewrap {
  transform: translateZ(0);
  animation-name: 'repaint';
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

@keyframes repaint {
  0% {
    zoom: 99.99999%;
  }
  99% {
    zoom: 99.99999%;
  }
  100% {
    zoom: 99.99998%;
  }
}

私が試みzoom: 99.99999;ました1が、いくつかのホバー効果でスケールが1を超えて遷移した特定の要素は、ズーム呼吸を示します。したがって、99.99999〜99.99998は、効果を目に見えなくするために私が働いたものです。

非常に長いページのパフォーマンスの問題を引き起こす可能性のある少しハックなソリューションですが、ブラウザは画面上のものだけをレンダリングする必要があるため、そうではない可能性があります。私がこれを使用したページは、グラフィックが重く、複雑なマルチレイヤー効果がたくさんあり、これはパフォーマンスに大きな影響を与えていないようです。

多くのモバイルブラウザーはレンダリングが過度に最適化されているようです。そのため、十分に文書化された修正がほとんどなく、風変わりなエラーが発生します。再ペイントを強制することが私が見つけた唯一の実用的な修正でした。

私は、再描画を強制するために、あまり積極的ではない、文書化された他の方法を試しました。スクロールが200ミリ秒停止した後、（目に見えないように）ページにテキストを追加するようなものです。何もうまくいかなかったので、私のアニメーションのページ全体を永久にハックしました。

あなたの場合、それらの他のハックのいくつかはよりうまく機能するかもしれません。この記事では、再描画/リフローの原因となるさまざまなことをすべて概説しているので、スクリプトを使用してこれらのことのいくつかを試すことができます。