モバイル Safari でスクロールしてもアドレス バー/URL バーが変化しない

Question

React (16.8.6) を使用して Web サイトを構築していますが、モバイル Safari では、ユーザーがスクロールを開始しても、他の Web サイトのように URL バーが折りたたまれたり縮小されません。

ラッピング div の CSS は次のようになります:

<ContentContainer>
    <スクロールコンテナ>
        {...その他のコンポーネントはこちら}
    <ScrollContainer/>
<ContentContainer/>

const ContentContainer = styled.div`
  height: 100%; /*ブラウザ ウィンドウの高さ全体を 2 つの列が占めることを許可します*/
  オーバーフロー-y: 自動;
  フレックスグロー: 1;
  ディスプレイ: フレックス;
  フレックス方向: 列;
`;
const ScrollContainer = styled.div`
  フレックス: 1;
`;
<p><br /></p>
<p>App.css は次のようになります:</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">html {
  高さ: 100%;
  最小高さ: 100vh;
}

体 {
  フォントファミリー: 'Work Sans'、'Courier New'、サンセリフ;
  最小高さ: 100%;
  高さ: 100%;
  マージン: 0px;
}
＃アプリ {
  高さ: 100%;
}

＃根 {
  高さ: 100%;
  ディスプレイ: フレックス;
  overflow: hidden; /*本文をスクロール不可にします*/
  ボックスのサイズ設定: ボーダーボックス;
}

この CSS で、ユーザーがスクロールするときに Safari の URL バーが折りたたまれないようにする問題を解決しようとしています。助けてくれてありがとう。

Answer 1

モバイル Safari で URL バーを折りたたむ/縮小するには、body をビューポートからオーバーフローさせる必要がありますが、ここではそうではありません。body はスクロール可能ではありません。 ContentContainer は完全にビューポート内にあります。

これをテストするには、CSS を使用せずに新しいページを作成し、ページをスクロール可能にするのに十分なコンテンツを body に挿入します。