解決してしまったTap delay問題

自己紹介

• @kyo_ago
• ChatWorkの中の人です
• 趣味でChrome向けSeleniumIDEを作ってます

解決してしまったTap delay問題

Tap delay問題とは

スマホ300msの壁

ネイティブに比べて「遅い」と言われる大きな要因

ダブルタップで拡大する用

ダブルタップで拡大する用

苦肉の策だった？

ftlabs/fastclickで一旦解決

その後Chrome、Firefoxがネイティブで対応

IEも対応

iOSは8で対応

これで主要なブラウザは対応された

問題はここで終わってしまった

しまった？

なぜ「しまった」なのか

それぞれ対応方法が違う

（Chrome、Firefoxは同じ）

それぞれの対応方法

• Chrome、Firefox
  meta[name="viewport"][content="width=device-width"]
• IE
  touch-action: none
• iOS8
  touch time(150ms)

どうすべきだったのか

どれも正直微妙

微妙

• Chrome、Firefox
  現実的だけど、metaにこれ以上意味をもたせるのはどうか

微妙

• Chrome、Firefox
  現実的だけど、metaにこれ以上意味をもたせるのはどうか
• IE
  理想的だけど、開発側の対応が必要

微妙

• Chrome、Firefox
  現実的だけど、metaにこれ以上意味をもたせるのはどうか
• IE
  理想的だけど、開発側の対応が必要
• iOS8
  無理矢理感もあるけどもともと仕様のないところなのである意味一番解決してる？

個人的にはとりあえずChrome、Firefoxの方法に揃って欲しかった

（最終的にはIEの実装によるとしても）

iOS8は動作としては理解はできるけど、なんで今さら独自動作に。。。

ちなみに各社touch-action対応は進んではいる

（Chrome 37、Firefoxはフラグで無効化中。WebKitはチケットはある）

我々はどうすべきか

html{ touch-action: none }しよう

（次善策としてmeta[name="viewport"][content="width=device-width"]とfastclickも使おう）

これは我々の問題である

ご清聴ありがとうございました

ChatWorkではフロントエンドエンジニアを募集しています！