Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

スマホ版chromeでタップ位置がずれるバグ

More than 1 year has passed since last update.

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


  1. なぜか再現しないこともある。拡大したり縮小したりすると再現しやすい?気がする。 

skawata
sencorp
幼稚園・保育園向けインターネット写真サービス「はいチーズ!」を提供しています。
https://sencorp.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away