Пара изменений в Chrome 108

«Изменение переполнения для замененных элементов в CSS»:

В Chrome 108 следующие замененные элементы учитывают свойство переполнения: img, video и canvas. В более ранних версиях Chrome это свойство для этих элементов игнорировалось.

Это означает, что изображение, которое ранее было обрезано по своему блоку содержимого, теперь может отображаться за пределами этих границ, если это указано в таблице стилей.

Таким образом, изображения, видео и элементы холста, которые когда-то были обрезаны, могут отображать переполнение при выпуске Chrome 108. Отмеченные ситуации, когда это может повлиять на вашу текущую работу:

• Ассоциация object-fit Свойство используется для масштабирования изображения и заполнения поля. Если соотношение сторон не соответствует окну, изображение будет отображаться за его пределами.
• Ассоциация border-radius делает квадратное изображение похожим на круг, но поскольку overflow виден отсечение больше не происходит.
• настройка inherit: all и вызывает наследование всех свойств, включая overflow.

Стоит прочитать полную статью для примеров кода, но решение для нежелательного видимого переполнения переопределяет значение по умолчанию UA. overflow: visible overflow: clip:

img {
  overflow: clip;
}

«Подготовьтесь к изменениям поведения при изменении размера области просмотра, которые появятся в Chrome на Android»:

В ноябре, с выпуском Chrome 108, Chrome внесет некоторые изменения в поведение окна просмотра макета при отображении экранной клавиатуры (OSK). С этим изменением Chrome на Android больше не будет изменять размер окна просмотра макета, а будет изменять размер только визуального окна просмотра. Это уравняет поведение Chrome на Android с поведением Chrome на iOS и Safari на iOS.

Это изменение связано с общими трудностями при работе с единицами измерения области просмотра и фиксированным позиционированием на мобильных сенсорных устройствах. Мы рассмотрели (и попытались решить) это на протяжении многих лет:

Это изменение означает, что Chrome на Android больше не будет изменять размер области просмотра макета при отображении экранной клавиатуры. Таким образом, вычисленные значения единиц области просмотра больше не будут уменьшаться при отображении клавиатуры устройства. То же самое касается элементов, которые предназначены для того, чтобы занимать всю область просмотра, больше не сжимаясь, чтобы вместить клавиатуру. И больше не будет элемент с фиксированным положением зависать неизвестно где, когда всплывает клавиатура.

Это обеспечивает более согласованное поведение в разных браузерах, которое соответствует Chrome, Safari и Edge на iOS и iPadOS. Это здорово, даже если обновленное поведение далеко от идеального, потому что пользовательский интерфейс клавиатуры все еще может скрывать и скрывать элементы, которые мешают ему.

Если вы предпочитаете, чтобы элементы оставались видимыми, когда это происходит, стоит взглянуть на решение, которым Крис поделился давным-давно который использует префикс webkit-fill-available имущество:

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

Это использует доступное пространство в области просмотра, а не то, что покрывается пользовательским интерфейсом… но Chrome в настоящее время игнорирует это свойство, и я готов поспорить на пятак в моем кармане, что он вряд ли начнет уважать его в выпуске 108. Хотя это может быть спорным моментом, т.к. В Chrome 108 также представлены поддержка малых, больших и динамических единиц области просмотра, которые уже поддерживаются в Safari и Firefox.