Help us understand the problem. What is going on with this article?

[iOS13]materializeのdropdownでリンクのタッチがずれる

materializeで個人開発してます。

Django + materializeで個人のWebアプリを作っています。
この記事はmaterializeを使っていて、うまく動かせなくて悩んだ内容の記事です。

dropdownがうまく使えない

dropdownしっていますか? あのdropdownです。
Qiitaの記事画面で編集リクエストとか出すときに使うやつです。
▼ ←こんなボタンを押すとにょいっとメニューが出てきて、リンク先に飛んだりできるやつですね。

無題.jpg

このdropdownを使って、詳細な操作を行うためのリンク先の一覧を表示していました。なぜかiOSだけタッチしたリンクとは違うところに飛んじゃって非常に悩んだので、今回記事にしました。

なお、予め断っておくと、一応直ったものの「これだ!」という決め手を得るまでには至ってないので、だれかちゃんとした解決策とか、対処法を知っていたら教えてくれると嬉しいです……。

どんな問題?

まあタイトルのとおりなんですが、ドロップダウンでタッチ位置と遷移するリンクがずれてしまいます。
わかっていることを箇条書きにすると…。

  • PCブラウザでは発生しない。
  • Chromeのデベロッパーモードスマホをエミュレートしても発生しない。
  • iOSでだけ発生する。
  • Androidで発生するかはわからない(持っていないので)

こんな感じです。

うまく動かない原因

いろいろ調べた結果の予測です。
materializeのdropdownはopen()とclose()をアニメーションで表現してくれます。dropdownは範囲内や外をタッチすると、開いたドロップダウンメニューを閉じる動作をします。

またiOSはclickイベントが発生するのに少し時間がかかる(ダブルタップやロングタップと区別するため)らしいです。
そのためiOSではclickを判定するために少々の時間が必要で、その間にdropdownのcloseのアニメーションでリンクの表示位置がずれ、タッチした箇所とは違うリンクが選択されてしまったのではないかと予測しています。
(リンクのタッチとclickイベントはまた別じゃないかとも思ったんですが、どうなんでしょう……?)

実際、dropdownのリンクをタッチしたき時、タッチした項目よりも下の項目のリンク先にジャンプすることが多く、一番下の項目は基本的にジャンプできなかったです。

とった対策

dropdownのcloseはclickイベントで処理されるので、clickよりも早い段階でページ遷移をムリヤリさせてしまいました。具体的にはdropdown内のaタグでtouchendイベントが発生したら、ページ遷移するようにしました。
touchendはタッチした指が離れた瞬間に発生するイベントでclickイベントよりも発生タイミングが早かったので、今回採用しました。

test.js
    // タッチイベント ドロップダウンリストのaタグのタッチエンドでhrefの先に飛ぶ
    $(document).on('touchend','.dropdown-content li a',function(){
        var href = $(this).attr('href');
        window.location.href = href;

        return false;
    });

結論

というわけで、一応dropdownのタッチした項目のリンク先にジャンプできるようになったので、自分はそのままにしています。
ただ、ちゃんと対応するなら、アニメーションのせいではないかと疑っているので、closeのアニメーションの速度を非常に遅くするとか、アニメーションをなくしてしまうとか、dropdown内のclickでは閉じないようにするとかの対応があったと思います。
あとはGithubにmaterializeのプロジェクトがあったので、ちゃんとissueにあげておけばよかったかなと……(英語が怖くて逃げました)。

だれかちゃんとした解決方法しってたら教えて下さい(他人任せ)。

mutax
はじめまして。 Djangoでタスク管理のWEBアプリ「gantt」を作っています。 アプリを作る上で身につけたこととか共有して行こうと思います。
https://gantt.work
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした