ページの下部に配置されたボタンがモバイルSafariのメニューバーと競合する
私は、複数のプラットフォームで機能的できれいでなければならないWebポータルを構築しています。
プラットフォームの1つはIOS Safariですが、これは問題が発生した場合です。
私のコードでは、幅と高さが100％のdivの下部に2つのフローティングボタンを配置しています
これはすべて正常に機能し、ボタンはページの下部にあるはずのボタンとまったく同じように表示されます。
ただし、ボタンをクリックすると、モバイルサファリからのコンパクトビューがフルビューに切り替わり、ボタンが下部のナビゲーションバーの後ろに隠れます。
ユーザーが画面の下10％をタップしたときに、Safari Mobileが展開されたメニューを表示するのは正常な動作ですか？
どうすればこれを回避できますか？
このgifでは、IOSシミュレーターで問題を確認できます：
ご覧のとおり、問題はボタンがビューの下10％にある場合にのみ発生します。これは単なる通常のボタンです。私のコードは複数の開発者によってトリプルチェックされており、エラーはありません。
私は答えを見つけたかもしれないと思います。次のスタイルを持つようにコンテンツを設定します。
height: 100%（コンテンツがビューポートを埋めて下部を超えられるようにします）overflow-y: scroll（ビューポートの下にスクロールできます。デフォルト値はvisibleです）-webkit-overflow-scrolling: touch（スクロール動作をスムーズにするため）
safariのiOSメニューを常に表示するように強制するようです。そうすれば、Safariメニューを開く代わりに、ボタンのクリックが実際に機能します。お役に立てれば！
これはsafarimobileの標準的な動作であるため、上書きすることはできません。おそらく将来的にはIOSこの機能が変更される予定です。
この質問は少し古いことは知っていますが、問題はまだ存在するので、私は自分の経験を共有する必要があると思いました...
現在のところ、この問題の修正はありませんが、回避策はあります。 jennz0rが提供するソリューションは一部の人にとってはうまくいくかもしれませんが、メニューバーが常に表示されるという考えは好きではありませんでした。問題が解決したウェブサイトを見ました...少なくともうまくいったようです。私は彼らのcssまたはjsに何も見つかりませんでした。
それで、修正は何でしたか？ 「デッドゾーン」の高さは44ピクセルなので、フローティングバーの高さを88ピクセルにしました：Dユーザーはボタンの上部/中央を本能的にタップし、ほとんどの場合、最初の試行で機能します。
「それが愚かであるが、それが機能する場合...それは愚かではありません...」;）