CSS 内の置換された要素のオーバーフローに関する変更

意図しないオーバーフローを引き起こす可能性がある CSS の動作変更に関する事前警告です。

Chrome 108 以降、overflow プロパティに対応する img、video、canvas の要素が置き換えられています。以前のバージョンの Chrome では、これらの要素でこのプロパティは無視されます。

つまり、コンテンツ ボックスに切り抜かれた画像を、スタイル シートで指定すれば、境界の外側に描画できるようになりました。デフォルトのブラウザのスタイルシートでは、以下のルールに沿ってオーバーフローがコンテンツ ボックスにクリップされます。

img {
  overflow: clip;
  overflow-clip-margin: content-box;
}

ただし、overflow: visible を設定することで、スタイルシートでこの動作をオーバーライドできます。以下の例は、望ましくないオーバーフローが発生する場合のあるケースを示しています。

object-fit プロパティは、画像を拡大縮小してボックスを埋めるために使用します。アスペクト比がボックスと一致しない場合、画像は境界の外側に描画されます。

img {
  object-fit: cover;
  overflow: visible;
}

border-radius プロパティを使用すると、正方形の画像は円のように見えますが、overflow は可視であるため、クリップは発生しなくなりました。

img {
  border-radius: 50% 50%;
  overflow: visible;
}

inherit: all を設定し、overflow を含むすべてのプロパティが継承されるようにする。

img {
  all: inherit;
}

解決策

この変更により不要なオーバーフローが発生し、オーバーフロー プロパティを「visible」にオーバーライドする意図が意図したものではない場合は、DevTools で要素に適用されている CSS を検査します。これにより、overflow プロパティを visible にオーバーライドしている CSS 宣言を特定し、それを削除するか clip に更新できるようになっています。

img {
    overflow: clip;
}

CSS の更新が簡単でない場合は、次のインライン スタイルを要素に追加するという修正もあります。

<img style="overflow:clip !important">