読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

html { touch-action: none; } に潜む罠

CSS Chrome Web

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

例えばこの記事を見て、

html { touch-action: none; }

ってそのまんま書いてみちゃってませんか?

実はこれ罠があるのでちゃんと意味を知っておかないと困ります。
そう、私のように・・。

何が起こるか

Tap delayを消したいがためにコレを書くと、単純に「画面のスクロールすらできなくなる」場合があります。

再現端末例: Xperia Z1 / Android Chrome 40

まーたAndroidがやらかしたのかと最初は思ったんですけど、まぁ割とハイスペックな端末で、かつChromeなんですよね。

まあiPhone5 / iOS Chrome 40だと起こらないのでまーたAndroidか案件には変わりないんですけど・・。

touch-actionとは

Pointer Events | 9.1 The touch-action CSS property

さて、そもそもこれはTap delayを消すために存在するプロパティではないので、そこを知らないとハマりますよっていうお話です。
そしてそもそも冒頭の資料にもあるように、これを指定してTap delayが消えるのはIE系の話です。

なので、Tap delayも消えない他の環境で指定するとどうなるか、です。
指定できる値は以下5つ。

  • auto
  • none
  • pan-x
  • pan-y
  • manipulation

もちろん実装があればですが、それぞれ指定で以下のようになります。

auto

The user agent may determine any permitted touch behaviors, such as panning and zooming manipulations of the viewport, for touches that begin on the element.

デフォルトの値で、何も指定してないときと同じ。
画面のスクロールもズームも、なんでもできるよって指定。(もちろんviewportのmetaタグとかで縛ってなければ)

none

Touches that begin on the element must not trigger default touch behaviors.

その名の通り。
画面さわってもうんともすんとも。
よって、画面スクロールもできなくなります。

pan-x | pan-y

The user agent may consider touches that begin on the element only for the purposes of horizontally | vertically scrolling the element's nearest ancestor with horizontally | vertically scrollable content.

X方向 | Y方向それぞれのスクロールだけを許可するならコレ。
これが地味に賢くて、"やや斜め上"みたいなものも、上方向としてちゃんと処理してくれます。

manipulation

The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.

noneと同じだが、スクロールとズームだけは通すようにするならコレ。

まぎらわしい用語や概念

touch*イベントが発火しないってこと?

これは関係ないです。
touch-action: none;な要素に対しても、普通にイベントは発火します。
スワイプバナーとかも問題なく動作します。

aタグやbuttonは?

動きます。

overflow: scroll

指定によっては動かないです。

panningってなに?

画面をスワイプしたり動かそうとするアレです。
指を画面に乗っけて、そのまま指を動かしたらそれはもうpanです。
なので画面をスクロールしようとする動作も含みます。

scrollingとpanningは一緒?

panningした結果、画面がスクロールするので、おそらく一緒。

manipulation 以上 none 以下ってどういう動きがある?

わかりません!(ホールドとか?)
これは知ってる人おしえてください。

というわけで

Can I use... Support tables for HTML5, CSS3, etc

モバイルでは実質まだまだ使えねーやつです。

ただAndroid標準ブラウザやiOS Safari、古い端末でChromeのバージョンが古かったりすると(効かないから)起きないけど、
新しい端末で最新のChromeとか使ってると、正常に効いてしまって思わぬ罠にかかることがあります。

ちゃんと確かめないままにnoneを指定してたりすると、なんでもないページでスクロールできなくて、
「え、こんな品質でリリースするつもり?わろすわろすm9(^Д^)」とかって知らない人に言われるので注意です。

私はこう思う

  • 既に出回ってる端末のことを考えると、モバイルでclickイベント使うのは来世までpend
  • なのでfastClickに準ずるものはほぼ必須
  • ゆえに今さらtouch-actionなんて実装されても使い道がない・・
  • どうしてもIE系で指定したいなら、noneじゃなくてmanipulationにしといたほうが無難
  • てかいつ使うのコレ