毎回タイトル長いな…。
でも、私にとって大切なことなのでもう一度。

どんな現象か

1. それはAndroidではなく、iPhoneのSafariで起こる。
2. 対象は、fixedで固定してある要素で、クリックなどでイベントが発火する物である。（例えばヘッダのハンバーガーメニューとか、フッタ付近の何かのメニューとか）
3. 最下部までスクロールしてあり、下からタブバー（メニューバー？）がひょこっと出てきた・もしくは出てくる直前の状態が鬼門。
4. タブバー出現に備えて？画面領域が再計算され、クリックできるはずの領域がタブバーの高さ分だけ上部にズレてしまう不思議。
5. よって、フッター付近の固定要素ならタップすべきはその直前の亜空間となり、ヘッダーなどで最上部に固定してある場合は、タップすべき場所は画面外となる。

スマホのメニューってドロワーかトグルで大抵右上固定なんで、メニュー押せないとか普通に困ります。
ささっとcssとかソースとか見たんですが、これといった問題も見つけれなかったので、急場凌ぎでscriptとかも書いてみました。
フッターにpadding-bottomを60pxくらいあてといて、scriptでスクロール量を取って、copyright表示部分まで来たら、下部から60px分スクロールとかするように。
が、今度はタイミングによってはバウンスが起こるので、scriptが走って走って、画面がブレブレにw
バウンスをどうこうするよりも、scriptを改修するよりも、大元を突き止めたほうが幸せになれるので、がんばって原因を探ることにしました。

犯人はviewport！

私の書くcssがそんなに悪いのか！？と思って、色々いろいろ試してみました。
よく見る　transform: translate3d(0,0,0);　とか、divで囲ってうんたらかんたらとかも試しましたが駄目でした。
ただ、同じようなことしてあっても、そんな現象起きてないサイトもたくさんあるわけです。何かが決定的に違うわけです。

で、まさかと思って変更してみたviewportがビンゴでした。

ダメなviewportの書き方

<meta name="viewport" content="width=320">
<meta name="viewport" content="width=320, initial-scale=1">
<!-- どっちもダメ -->

大丈夫なviewportの書き方

<meta name="viewport" content="width=device-width, initial-scale=1">

要は、すべて端末に委ねなさい、っていうことですね。
外の人と話し合って、今後のレスポンシブのデザイン規定を変更することにしました。
まさに紆余曲折五里霧中状態でしたが、これでほっと一安心です。

ちなみに、↓が本家本元Appleのviewport指定です。

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Appleと一緒なら怖くないので、今後はこれを採用ですね。
ちなみに、 viewport-fit=cover” は、iPhoneXの両端の白いバーを表示しないようにする設定です。
全世界で絶大なる不評を得たダサいあの領域が、存在を主張するわけですね。
だからいっそのこと消してしまえと。わかります。

……って、あれ？あれれれれ？？
Apple…おまえさん……。