Zmiana sposobu wyświetlania zastępowanych elementów w kodzie CSS

Zaawansowane ostrzeżenie o zmianie sposobu działania CSS, która może spowodować niepożądane przepełnienie treści.

Od Chrome 108 następujące zastąpione elementy uwzględniają właściwość overflow: img, video i canvas. We wcześniejszych wersjach Chrome ta właściwość była ignorowana w przypadku tych elementów.

Oznacza to, że obraz przycięty wcześniej do pola treści może teraz rysować poza tymi granicami, jeśli zostało to określone w arkuszu stylów. Domyślny arkusz stylów przeglądarki przypina zakres do pola treści zgodnie z tymi regułami:

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

Istnieje jednak możliwość, że arkusz stylów zastąpi to działanie, ustawiając overflow: visible. W poniższych przykładach opisano wybrane przypadki, w których możliwe jest przekroczenie limitu danych.

Właściwość object-fit służy do skalowania obrazu i wypełniania jego pola. Jeśli format obrazu nie pasuje do ramki, obraz zostanie narysowany poza granicami.

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

Właściwość border-radius sprawia, że obraz kwadratowy wygląda jak koło, ale ponieważ overflow jest widoczny, przycinanie już nie występuje.

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

Ustawienie inherit: all i wymuszanie dziedziczenia wszystkich właściwości, w tym właściwości overflow.

img {
  all: inherit;
}

Rozwiązanie

Jeśli ta zmiana oznacza, że pojawia się niechciane przepełnienie, a zastąpienie właściwości „overflow” jako „visible” jest celowe, sprawdź CSS zastosowany do elementu za pomocą Narzędzi deweloperskich. Powinno to umożliwić Ci odnalezienie deklaracji CSS, która zastępuje właściwość overflow, na visible, i jej usunięcie lub zaktualizowanie jej do clip.

img {
    overflow: clip;
}

Jeśli aktualizacja kodu CSS nie jest prosta, możesz dodać do elementu poniższy styl wbudowany.

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