PCのレスポンシブレイアウトで動作確認を行っていて、実機での動作確認を怠っているとハマる罠
「ページ下端固定のボタン」の罠についてご紹介します。
iPhoneのMobile Safariにはデッドゾーンとか言われるものが存在します。
画面を下スクロールしてアクションバーを消えている状態で、下端をタップすると
「Safariのアクションバーを表示する操作」として認識されていまうのです。
そして、意図していたタッチイベントは発火しません。
ちょっと参考画像が縦に長いですがデッドゾーンがこんな風にあるイメージです。
このアクションバーが現れるデッドゾーン、具体的には44pxらしいです。
さらに、iPhone X系などのホームボタンのない機種ではセーフゾーンなんかも現れて
当たり判定が奪われてしまうこともあるようです。
詳しいことはこの記事が詳しいです。
iOS Safariのアクションバー表示エリアはタップイベントをブロックする | Orime
このことを考えると、SP Web向けに行うUIデザインでは、
下端に追従するようなボタンを作るときは、少し下端を開けても成立するように
「丸の中にアイコン」とかにしてあげるとよいでしょう。
メジャーなサイトでよく見るあのボタン(Floating Actionボタンというそうです)には
こういったデバイス上の制限という合理的な理由もあるのですね。