Кілька змін у 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. Це чудово, навіть якщо оновлена ​​поведінка не ідеальна, оскільки користувальницький інтерфейс клавіатури все ще може закривати та затемнювати елементи, які стають на її шляху.

Якщо ви бажаєте, щоб елементи залишалися видимими, коли це станеться, варто звернути увагу на a Кріс давно поділився рішенням який використовує префікс webkit-fill-available майно:

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

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