FirefoxでCSSのzoomは使えない・・・

最近作成しているWEBアプリケーションで、ページの拡大機能をつけようとCSSのzoomを使ってみた・・・
うん、うまくいったと思って、Firefoxで確認してみると、拡大しないぞ！！
なんと！zoomって元々IEの独自実装だったんだね。
Chromeでは動作したので、標準実装かと思ってた・・・・適当に覚えてたよ。

というわけで、いろいろ調べてみると、transformプロパティのscale()を使えば解決しそうだ。

.css
body{
  transform: scale(2.0); /* 2倍に拡大 */
}

ん？？？
なんと、拡大すると左上が隠れてしまうよ・・・
そうか、じゃあtranslate()で移動しようという考えがチラホラ。。。
でも、どのくらい移動していいかわからないし、やり方が野暮ったいよねぇ。
で、さらに調べ見るとMDNにtransform-originというそれっぽいプロパティを発見！！

.css
body{
  transform-origin: 0 0;
  transform: scale(2.0); /* 2倍に拡大 */
}

はい、これで無事に拡大できました。
めでたし、めでたし。。。

ふんどしの持ち主

• MDN