Kilka zmian nadchodzi w Chrome 108

„Zmiana na przepełnienie na zastąpionych elementach w CSS”:

Z Chrome 108 następujące zastąpione elementy respektują właściwość przepełnienia: 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 swojego pola treści, może teraz rysować poza tymi granicami, jeśli określono to w arkuszu stylów.

Tak więc elementy obrazu, wideo i kanwy, które zostały kiedyś przycięte, mogą wyświetlać przepełnienie po dostarczeniu Chrome 108. Wymienione sytuacje, w których może to wpłynąć na twoją dotychczasową pracę:

• Połączenia object-fit właściwość służy do skalowania obrazu i wypełnienia pola. Jeśli proporcje nie są zgodne z ramką, obraz zostanie narysowany poza granicami.
• Połączenia border-radius właściwość sprawia, że ​​kwadratowy obraz wygląda jak koło, ale ponieważ overflow jest widoczne, przycinanie już nie występuje.
• Oprawa inherit: all i spowodowanie dziedziczenia wszystkich właściwości, w tym overflow.

Warto przeczytać cały artykuł z przykładami kodu, ale rozwiązaniem dla niechcianego widocznego przepełnienia jest nadpisanie domyślnego UA overflow: visible w overflow: clip:

img {
  overflow: clip;
}

„Przygotuj się na zmiany zachowania zmiany rozmiaru widocznego obszaru, które pojawią się w Chrome na Androida”:

W listopadzie, wraz z wydaniem Chrome 108, Chrome wprowadzi pewne zmiany w zachowaniu rzutni układu po wyświetleniu klawiatury ekranowej (OSK). Dzięki tej zmianie Chrome na Androida nie będzie już zmieniać rozmiaru rzutni układu, a zamiast tego zmienia rozmiar tylko rzutni wizualnej. Spowoduje to, że zachowanie Chrome na Androida będzie porównywalne z działaniem Chrome na iOS i Safari na iOS.

Jest to zmiana związana z powszechnymi problemami związanymi z pracą z jednostkami rzutni i stałym pozycjonowaniem na mobilnych urządzeniach dotykowych. Omówiliśmy (i próbowaliśmy rozwiązać) to przez lata:

Zmiana oznacza, że ​​Chrome na Androida nie będzie już zmieniać rozmiaru rzutni układu, gdy wyświetlana jest klawiatura ekranowa. Tak więc obliczone wartości jednostek rzutni nie będą się już zmniejszać, gdy wyświetlana jest klawiatura urządzenia. To samo dotyczy elementów zaprojektowanych tak, aby zajmowały cały obszar wyświetlania, nie kurcząc się już, aby pomieścić klawiaturę. I nie będzie już więcej elementu o stałej pozycji, który wie, gdzie pojawi się klawiatura.

Zapewnia to bardziej spójne zachowanie w różnych przeglądarkach, które jest zgodne z Chrome, Safari i Edge na iOS i iPadOS. To świetnie, nawet jeśli zaktualizowane zachowanie nie jest idealne, ponieważ interfejs użytkownika klawiatury może nadal zakrywać i ukrywać elementy, które stają mu na drodze.

Jeśli wolisz, aby elementy pozostały widoczne, gdy tak się stanie, warto przyjrzeć się rozwiązanie, które Chris dzielił dawno temu który używa prefiksu webkit-fill-available własność:

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

To wykorzystuje dostępną przestrzeń w oknie widoku, a nie to, co jest objęte interfejsem użytkownika… ale Chrome obecnie ignoruje tę właściwość i założę się o pięciocentówkę w mojej kieszeni, że jest mało prawdopodobne, aby zaczął ją szanować w wersji 108. Może to być jednak kwestia sporna, ponieważ Chrome 108 wprowadza również obsługa małych, dużych i dynamicznych jednostek rzutni, które są już obsługiwane w Safari i Firefox.