クリエイターなら絶対に登録しておきたい転職エージェント5選!

FirefoxでCSSのzoomプロパティが効かない時の対処法

この記事を読むのに必要な時間は約 3 分です。

WEBサイトを作成している際に各種ブラウザでの動作チェックを行います。
その際、Firefox(ファイアーフォックス)で「zoomプロパティで拡大したはずの要素が拡大されていない」現象に遭遇した方は多いはずです。

当記事はそんな「Firefoxだけzoomで拡大されない現象」の対処法を解説します。

例えばチェックボックスを大きくしたい

下記に通常サイズのチェックボックスを配置しています。
押し辛いので大きくしたい時、ありますよね。

HTML

<input type="checkbox">

従来のzoomプロパティだけ

zoomプロパティを使ってチェックボックスのサイズを2倍にしました。
ChromeやEdgeなら問題無いのですが、Firefoxで確認するとチェックボックスの大きさが等倍のままです。

HTML

<input type="checkbox" class="expansion1">

CSS

.expansion1{
  zoom:2.0;
}

Firefox対応の解決版

これでFirefoxの時でも2倍に拡大されて表示されます。
Firefoxのみtransformプロパティで拡大、その他ブラウザはzoomプロパティで拡大しています。

もし1.5倍にしたい場合は2.0を1.5にするだけです。

HTML

<input type="checkbox" class="expansion2">

CSS

.expansion2{
  zoom:2.0;
}

/*Firefox用*/
@-moz-document url-prefix(){
  .expansion2{
    transform-origin: 0 0;
    transform: scale(2.0);
  }
}

おわりに

以上、Firefoxでcssのzoomプロパティが効かない時の対処法についてでした。

みなさんはどんなブラウザを使われていますか?
私はChromeが好みです。

サイト制作者側からすると、サイト制作の際に他ブラウザの対応をしないといけないので、個人的にはChorme以外全て撲滅してほしいです。
Chromeだけになると制作時間が短縮できるのに。

ではまた!