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

Zaawansowane ostrzeżenie o zmianie w działaniu CSS, która może spowodować niepożądane przepełnienie.

Od wersji Chrome 108 te 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 tych elementach.

Oznacza to, że obraz, który został wcześniej przycięty do pola treści, może teraz rysować poza tymi granicami, jeśli zaznaczono to w arkuszu stylów. Domyślny arkusz stylów przeglądarki wycina okno nad polem treści za pomocą następujących reguł:

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

Istnieje jednak możliwość zastąpienia tego działania przez ustawienie overflow: visible w arkuszu stylów. Poniższe przykłady pokazują niektóre sytuacje, w których może pojawić się niechciane przepełnienie.

Właściwość object-fit służy do skalowania obrazu i wypełniania pola. Jeśli format obrazu nie pasuje do pola, obraz będzie rysowany poza granicami.

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

Właściwość border-radius sprawia, że obraz kwadratowy wygląda jak okrąg, ale ze względu na widoczność overflow przycinanie nie jest już widoczne.

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

Ustawianie zasady inherit: all i powodowanie dziedziczenia wszystkich usług, w tym overflow.

img {
  all: inherit;
}

Rozwiązanie

Jeśli ta zmiana oznacza, że widzisz niepożądane przepełnienie, a zastąpienie właściwości „overflow” tak, aby była widoczna, nie jest zamierzone, sprawdź CSS zastosowany do elementu za pomocą Narzędzi deweloperskich. Powinno to pomóc zidentyfikować deklarację CSS, która zastępuje właściwość „overflow” na visible, i usunąć ją lub zaktualizować do clip.

img {
    overflow: clip;
}

Jeśli zaktualizowanie kodu CSS nie jest trywialne, kolejną poprawką jest dodanie do elementu poniższego stylu wbudowanego.

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