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

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

Chrome 108 以降では、オーバーフロー プロパティ 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;
}

解決策

この変更により意図しないオーバーフローが発生して、オーバーフロー プロパティを表示状態にオーバーライドすることが意図的でない場合は、DevTools で要素に適用されている CSS を確認します。これにより、オーバーフロー プロパティを visible にオーバーライドしている CSS 宣言を特定し、削除または clip に更新できるようになります。

img {
    overflow: clip;
}

CSS の更新が面倒な場合は、次のインライン スタイルを要素に追加することもできます。

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