PCブラウザとSPブラウザでzoom適用時のピクセルの扱いが異なる

タイトルの通りなのだけど、PCブラウザとSPブラウザでzoomプロパティが適用された小要素のピクセルの扱いが微妙に違ってて最近はまったりした。

以下を試してみてもらうとわかるかも。

See the Pen zoom and pixel by sasa+1 (@sasaplus1) on CodePen.

PCブラウザ(試したのはOS XのGoogle ChromeとMozilla Firefoxだけなんだけど)だと、zoomが1でも1.5でも+=5したら5px移動する。というか+=5をした後の値を取得すると、前回の値に5pxが足された値になる。

SPブラウザ(試したのはiOSエミュレータのiOS8とiOS7だったかな、とAndroid 2.3.3と2.3.7の実機)だと、zoomが1の時は5px移動するけど、1.5の時は5 * 1.5 = 7.5になる。前回の値 * 1.5と足す値 * 1.5になる。 しかも、SPブラウザの場合ちゃんと7.5で返す機種と小数点を切り捨てて7で返す機種とあるみたいで……(iOSは7.5で返してAndroidは7で返す?Androidでも機種によるのかな?それともparseFloatじゃなくてparseInt使ってたのかな、覚えてない)

なのでSPブラウザの場合でzoomが適用されている場合はzoomの値で割る必要がある。

zoomなんて今までほとんど使った事ないから全くわからなかったし、zoomが適用されたページだという事を知らなかったのでかなり混乱した。zoom使わないで欲しいなあ。