Изменение переполнения замененных элементов в 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;
}

Решение

Если это изменение означает, что вы видите нежелательное переполнение и переопределение свойства overflow на видимое не является намеренным, проверьте CSS, примененный к элементу, с помощью DevTools. Это должно позволить вам идентифицировать объявление CSS, которое переопределяет свойство overflow, чтобы оно было visible , и удалить его или обновить до clip .

img {
    overflow: clip;
}

Если обновление CSS не является тривиальной задачей, еще одно решение — добавить к элементу следующий встроенный стиль.

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