CSSのzoomがアニメーション可能になったので注意が必要

Chrome v150からzoomがアニメーション可能に

Google Chrome v150のアップデートにより、これまでアニメーションに対応していなかったCSSのzoomプロパティがtransitionによるアニメーションに対応しました。

要素をスムーズに拡大・縮小できる便利な機能ですが、transform: scale()とは明確に異なる挙動を示すため、思わぬレイアウト崩れを引き起こす可能性があります。

.box {
  width: 200px;
  height: 200px;
  background-color: #e6f2ff;
  border: 2px solid #0066cc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
  zoom: 1;
  transition: zoom 0.3s ease;
  word-break: auto-phrase;
}

.box:hover {
  zoom: 2;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #e6f2ff;
  border: 2px solid #0066cc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
  zoom: 1;
  transition: zoom 0.3s ease;
  word-break: auto-phrase;
}

.box:hover {
  zoom: 2;
}

意図せずアニメーションになる可能性がある

もし既存のCSSで、以下のようにallで「すべてのプロパティをトランジションさせる」指定をしている場合、意図しないアニメーションが発生するリスクがあります。

.box {
  zoom: 1;
  transition: all 0.3s ease;
}

.box.active {
  zoom: 2;
}

.box {
  zoom: 1;
  transition: all 0.3s ease;
}

.box.active {
  zoom: 2;
}

もし、ChromeまたはEdgeのバージョン150以降でWebサイトを閲覧したときに意図しないアニメーションが発生する箇所がある場合は、zoomの影響である可能性が考えられます。

主要なブラウザでzoomのアニメーションに対応しているのはChromeおよびEdgeのバージョン150以降だけです。

SafariおよびFirefoxでは利用不可なので注意が必要です。

関連した記事

【CSS】borderを使って、＞を作るのはやめませんか？ CSSで:hover時にwidth, height, scaleを使用して拡大する方法 CSSのzoomプロパティが標準化されたが、CSSアニメーションは不可なので注意 CSSアニメーションの基礎知識のあとに学ぶ応用知識