Safari IOSメニューバーが画面の下部10％のボタンと競合する

私は、複数のプラットフォームで機能し、かなり機能するWebポータルを構築しています。プラットフォームの1つはIOS Safariで、これは問題が発生した場合です。私のコードでは、幅と高さが100％のdivの下部に2つのフローティングボタンを配置しています。ただし、ボタンをクリックすると、モバイルサファリからのコンパクトビューがフルビューに切り替わり、ボタンが下部のナビゲーションバーの後ろに隠れます。

ユーザーが画面の下部10％をタップしたときにSafariモバイルが拡張メニューを表示するのは正常な動作ですか？どうすればこれを回避できますか？

このgifでは、IOSシミュレーターで
問題を確認できます。問題が発生するのは、ボタンがビューの下位10％にある場合のみです。これは通常のボタンにすぎません。私のコードは複数の開発者によってトリプルチェックされ、エラーはありません。

これはMobile Safariの通常の動作です。下部をタップすると、さまざまなブラウザーオプションが表示され、それに応じてWebページが上にスクロールします。ただし、Webページの機能は同じなので、ユーザーはスクロールした後もボタンをタップして、ボタンの機能にアクセスできます。

答えを見つけたかもしれません。次のスタイルを持つようにコンテンツを設定します。

• height: 100% （コンテンツがビューポートを満たし、下部を超えることができます）
• overflow-y: scroll（ビューポートの下までスクロールできます。デフォルト値はですvisible）
• -webkit-overflow-scrolling: touch （スクロール動作をスムーズにするため）

SafariのiOSメニューが常に表示されるように表示されます。そうすれば、Safariメニューを開く代わりに、ボタンクリックが実際に機能します。お役に立てれば！