すみません、三日目と勘違いしてました……。
今回はtransform:scale()
とzoom
の併用についてです。バグじゃないです。
デモ:
ChromeとIE 10+で、なんか二段階に大きくなったりしました。FirefoxとIE 8-は大丈夫。IE 9は変だけど気付かないかも。
拡大したかったんです。そして古いIEにも対応したかった。(拡大の基準点がずれるのは今回どうでもいいや。)
両方書いておけば「最近のはtransform、古いIEはzoomで良い感じに動く」かなーと思ったんですが、だめでした。zoomが実装されっぱなし。
で、結局どうしたかというと、JSで判定して分岐しました。
// transform:scale()が使えない環境で、zoomで代用するためのフラグ var s = document.body.style; var transformable = ('transform' in s || '-webkit-transform' in s); if (!transformable) { document.body.className += ' is-untransformable'; }
.box { -webkit-transform: scale(1.2); transform: scale(1.2); } body.is-untransformable .box { zoom: 1.2; }
ちょっと面倒くさいね。
というお話でした。バグの話じゃなくてすみません。