style属性でzoomを指定すると特定の状況でzoomが無効になる

CSS 珍百景 Advent Calendar 20145日目のエントリ。

こちらでの再現ブラウザはGoogle Chrome 39.0.2171.71とiOS 7.1.2 Mobile Safari。状況を詳しく説明すると、外部CSSファイル、及びstyleタグでzoomプロパティがすでに設定してある要素に対して、 CSSで指定されているzoom値と同じ値をstyle属性で指定するとzoomが効かなくなるというもの。

style属性で指定するzoom値を変更できる デモを用意した。テキストエリアに数字を入れて隣のaddボタンを押すとその下の要素にstyle="zoom: N"が付与されるようになっている。背景に50pxごとのグリッドになっている画像を敷いたので、倍率が少しわかりやすいと思う。ページを開いた時の初期表示ではCSS側のzoom: 2;が効いているはず。

DevToolsを開いて要素のstyle属性を確認しながら、まずは数値を2にしてaddボタンとremoveボタンを押してみて欲しい。zoomがstyle属性でつくと拡大が無効になり、消すと拡大されるのがわかると思う。addしたのに大きくならない。removeしたのに大きくなる。同値での上書きなので表示サイズは変化しないでそのままになるはずだ。数値を2以外(2.0001なども可)にすれば動作は期待通りになる。同じ値の操作の時のみ、珍事が起きる。

少々重いが Gifアニメを用意したので、再現できない人はこちらを見てほしい。

そもそも同じ値をstyle属性で指定するシチュエーションなんてほぼない。業務で端末の画面サイズから倍率を算出して上書きする必要があって、JS実装のミスで必要がない端末でも上書きがかかったところ、拡大されなくなっているのを見てこのバグに気づいた。IE11では再現しなかったし、zoomプロパティ未実装のFirefoxでも当然起こらない。

気づいたのは2つか3つバージョンが前のChromeでだけど、iOS 7.1.2 Mobile Safariでも再現するのを見るに、もしかしたらChromeがBlinkになる前からWebkitの珍挙動として存在していたかもしれない。ちなみに、 transform: scale();なら問題ない

zoomこわい。