非標準で Firefox だとサポートされてないものみたいです
event.path のときと同じ感じみたいですね
実際ズームしたいときは transform の scale 関数や scale プロパティで指定していたので zoom は特に使った覚えもないです
.zoom {
transform: scale(1.2);
/* or */
scale: 1.2;
}
代替があるなら無くても良さそうと思いましたが 全く同じ挙動ではないみたいで zoom を正式な機能にしたいという要望もあるようでした
違いは拡大のタイミングで レイアウトの前にズームするか後にズームするかが異なってるようです
scale だとレイアウト計算後の拡大・縮小なので 倍率が変わっても実体の大きさは変わらないとして扱われて 周りのレイアウトを壊しません
なので アニメーションに向いています
ですが レイアウトが決まった後に拡大するので 画面幅 100% いっぱいのページに対して全体を拡大するとはみ出ます
スクロールバーが出てきます
そういうことがあるので レイアウトを計算する段階で拡大を有効にしたい場合には使えません
これに対して zoom だと拡大・縮小されたものとしてレイアウトが計算されるのでスクロールバーは出ません
固定サイズのものを折り返しなしで並べるなど スタイルによっては出るケースもありますが scale と違って確実に出るわけではないです
Ctrl-+ などブラウザの機能としてのズームと同じ扱いです
こういう違いがあると zoom がなくなると困る人もいそうです
Safari (Webkit) もこの機能を実装していて Chrome に合わせて削除するかの議論がこの issue です
https://github.com/WebKit/standards-positions/issues/170
壊れるページが出てくると言ってますし 本当に削除できるのか疑問もあります
Chrome も壊れるサイトが多いとやっぱりやめるとかあるのかもしれません
現状の予定では Chrome 114 （次のバージョン） で Developer trial として削除されて 117 で正式に削除の予定のようです
また zoom には現在の倍率を知るという使い方もあったようで これができなくなるそうです
getComputedStyle(document.documentElement).zoom
// '1'
のように html 要素の計算済みスタイルの zoom を参照します
Ctrl-+ などブラウザの機能でズーム倍率を変更して 150% にすると '1.5' になります
Windows の機能で拡大縮小した場合も反映されます
150% 設定なら '1.5' になります
Windows の設定で 150% で さらにブラウザで 150% にズームすると掛け算されて '2.25' になります
倍率がわかって便利です
しかし html 要素に zoom スタイルがあたってると この機能がなくなります
スタイルとして指定された値が固定で返ってきます
html { zoom: 2 }
というスタイルがあると Windows の設定やブラウザのズーム倍率は無視され ずっと '2' になります
また Windows の設定で 150% なら デフォルトが '1.5' のはずなのに
html { zoom: 1.5 }
というスタイルを適用すると そのままの倍率ではなく さらに 150% の拡大が行われます
非標準というだけあってわかりづらく一貫性のない挙動です
設定せず参照のみであれば使えそうな気はしますが 現在は window.devicePixelRatio で同じ値が取れるのでこれはなくてもよさそうです
その後
