スマホのクロームでスクロールするとタップ位置がずれる

昔作ったサイトを修正していたら、スマホのクロームでスクロールするとタップ位置がずれるという事象にあいました。

結果からいうと、ヘッダータグの

<meta name="viewport" content="width=320px" />

としていたことが原因でした。

事象的には、アンドロイド端末のクロームで、下にスクロールする時にURLバーが隠れるようになっているのですが、スクロールが止まった瞬間にURLバー分の高さが戻される動きをしていました。

その後、タップをするとタップ位置からURLバー分上にタップされるという事象です。

調べたのですが、そのような不具合が見つからなかったので書き止めておきます。

おそらく、URLバーを隠す時の挙動で縦の高さを操作していると思われ、端末の使用も影響しているかもしれませんがタップ位置がずれるという不思議な結果となっています。

他のアンドロイドfirefoxやiOSでは発生しませんでした。

結果的にはviewportの設定を

<meta name="viewport" content="width=device-width, user-scalable=no" />

にするとずれは解消されました。

横幅の計算と縦幅の計算を同時にやっているということでしょうか？？

詳細は分からなかったので、とりあえず解決策だけは記載しております。

いつか分かったら追記させて頂きます。