Chrome 66で一部のAndroid端末でタップ位置がずれる問題が発生したのでその調査記録です。
細かい発生条件とかを書いてあるサイトがなかったので調べてみました。
再現手順
<!DOCTYPE html>
<meta name="viewport" content="width=360">
<div style="position:fixed;width:100px;height:100px;background-color:#000;top:0;left:0;"></div>
<div style="margin-top:500px;height:100px;background-color:#f00;" onclick="alert('1st button clicked');">1st button</div>
<div style="margin-bottom:500px;height: 100px;background-color:#0f0;" onclick="alert('2nd button clicked');">2nd button</div>
上記ページを画面幅が361px以上のデバイスで閲覧し、上にスクロールしていくと、上の黒い四角が上にスクロールしていくことがある。 1 この状態で二つ目のボタンをタップすると「1st button clicked」と表示される。
もともとの画面幅が361px以上でないデバイスでも、設定→ユーザー補助→表示サイズを小さくする、開発者オプション→最小幅を変更するなどの方法で画面幅を変えることで再現可能。
原因
Chromeのバグ
https://bugs.chromium.org/p/chromium/issues/detail?id=839383
https://bugs.chromium.org/p/chromium/issues/detail?id=843498
タグでviewportのwidthを数値で指定しており、かつ指定したwidthが実際のデバイス幅より小さいときに起こる。
すでに修正済みのようなのでそのうち治るはず。
解決策
viewportのwidthを数値で指定せずdevice-widthにする。
<meta name="viewport" content="width=device-width">
参考にしたリンク
https://teratail.com/questions/125197
http://3rdcom.tokyo/2018/05/27/%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%AE%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%A0%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E3%81%A8%E3%82%BF%E3%83%83%E3%83%97%E4%BD%8D%E7%BD%AE/
https://bugs.chromium.org/p/chromium/issues/detail?id=839383
https://bugs.chromium.org/p/chromium/issues/detail?id=843498
-
なぜか再現しないこともある。拡大したり縮小したりすると再現しやすい？気がする。 ↩