iOSでSafariのナビゲーションバーがコラプスしている間に要素を固定します

このレイアウトでは、左側に100％幅の固定ナビゲーションバーが使用されています。これはほとんどの状況でうまくいきます。

iOSのSafariでは、ブラウザのトップナビゲーションバーが折りたたまれているため、ユーザーがスクロールしている間にビューポートの高さが変わります。このような場合は、スクロールが停止するまでナビゲーションバーのサイズは更新されず、左下隅にナビゲーションバーで表示されない領域が残ります（

ページが動いている間にスクリーンショットが撮られました。）

This videoは、問題のある動作を示しています。

スクロールの進行中にSafariにナビゲーションバーの高さを強制的に更新させる方法はありますか？

2017-07-05 fefrei

進行中の議論。この問題の解決策はありません。あなたのウェブサイトのために試すことができますどのようなhttps://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

以下の通りです：

.sidebar { 
    position: fixed; 
    left: 0; 
    bottom: 0; 
    width: 18rem; 
    text-align: left; 
    height: 100vh; 
}

これは底面とテキスト文句を言わないカットにサイドバーを合わせます。白いバーが上に表示されますが、底が切り取られるとあまりにも邪魔になりません。

2017-07-05 10:35:32 viCky

を見つける問題に

html,body{ -webkit-overflow-scrolling: touch; }

Hereを修正するには、以下のスタイルを追加します。ありがとうございました！これは解決策にかなり近いものです。サイドバーが数ピクセル分スクロールしなくなり、上部の白いバーが受け入れやすくなります。 – fefrei

誰かが完全な解決策を持っているかどうかを確認するためにもう少しお待ちしています。サイドノートでは：パッディングをちょっと試した後、Safariは少なくともほとんどの場合、左上に背景をレンダリングするようになりました。奇妙だが、ありがとう！ – fefrei

あなたのiOSを更新すると、問題が解決したことがわかります。私はiPhone 7でこの問題に直面していません – viCky

あなたが参照に

2017-07-05 10:36:36 Karthik

残念ながら、これを追加しても効果はありませんでした。 – fefrei

答えて