Ein paar Änderungen kommen in Chrome 108

„Eine Änderung an overflow bei ersetzten Elementen in CSS“:

Ab Chrome 108 respektieren die folgenden ersetzten Elemente die Eigenschaft overflow: img, video und canvas. In früheren Versionen von Chrome wurde diese Eigenschaft bei diesen Elementen ignoriert. 

Das bedeutet, dass ein Bild, das zuvor auf seine Inhaltsbox zugeschnitten wurde, nun außerhalb dieser Grenzen gezeichnet werden kann, wenn dies in einem Stylesheet angegeben ist.

Daher könnten Bilder, Videos und Canvas-Elemente, die standardmäßig überlaufen, beim Erscheinen von Chrome 108 zugeschnitten werden. Die genannten Situationen, in denen dies Ihre bestehende Arbeit beeinträchtigen könnte

• Die object-fit Eigenschaft wird verwendet, um das Bild zu skalieren und die Box zu füllen. Wenn das Seitenverhältnis nicht mit der Box übereinstimmt, wird das Bild außerhalb der Grenzen gezeichnet.
• Die border-radius Eigenschaft lässt ein quadratisches Bild wie einen Kreis aussehen, aber da overflow sichtbar ist, tritt der Zuschnitt nicht mehr auf.
• Einstellung inherit: all und bewirkt, dass alle Eigenschaften geerbt werden, einschließlich overflow.

Es lohnt sich, den vollständigen Artikel für Codebeispiele zu lesen, aber die Lösung für unerwünschte Zuschnitte besteht darin, das standardmäßige overflow: clip des UA mit overflow: visible zu überschreiben.

img {
  overflow: visible;
}

---

„Bereiten Sie sich auf Änderungen des Viewport-Größenverhaltens vor, die in Chrome für Android kommen“:

Im November, mit der Veröffentlichung von Chrome 108, wird Chrome einige Änderungen daran vornehmen, wie sich der Layout-Viewport verhält, wenn die Bildschirmtastatur (OSK) angezeigt wird. Mit dieser Änderung wird Chrome unter Android den Layout-Viewport nicht mehr vergrößern, sondern nur noch den visuellen Viewport vergrößern. Dies wird das Verhalten von Chrome unter Android mit dem von Chrome unter iOS und Safari unter iOS auf eine Stufe stellen.

Dies ist eine Änderung, die sich auf die üblichen Schwierigkeiten bei der Arbeit mit Viewport-Einheiten und fester Positionierung auf mobilen Touch-Geräten bezieht. Wir haben dies im Laufe der Jahre behandelt (und versucht zu lösen).

• „Einige Dinge, die Sie wissen sollten, wenn Sie mit Viewport-Einheiten arbeiten“ (Chris Coyier)
• „Der Trick mit Viewport-Einheiten auf Mobilgeräten“ (Louis Hoebregts)
• „Die großen, kleinen und dynamischen Viewports“ (Chris Coyier)
• „CSS-Fix für 100vh in mobilen WebKit-Browsern“ (Chris Coyier)

Die Änderung bedeutet, dass Chrome unter Android den Layout-Viewport nicht mehr vergrößert, wenn die Bildschirmtastatur angezeigt wird. Daher werden die berechneten Werte der Viewport-Einheiten nicht mehr schrumpfen, wenn die Tastatur eines Geräts angezeigt wird. Gleiches gilt für Elemente, die so konzipiert sind, dass sie den gesamten Viewport einnehmen, und die nicht mehr schrumpfen, um die Tastatur aufzunehmen. Und ein Element mit fester Position wird nicht mehr an einem unbekannten Ort landen, wenn die Tastatur aufpoppt.

Dies führt zu einem konsistenteren plattformübergreifenden Verhalten, das mit Chrome, Safari und Edge unter iOS und iPadOS übereinstimmt. Das ist großartig, auch wenn das aktualisierte Verhalten weniger als ideal ist, da die Tastatur-UI immer noch Elemente verdecken und verdecken kann, die ihr im Weg stehen.

Wenn Sie möchten, dass Elemente auch dann sichtbar bleiben, lohnt es sich, eine Lösung anzusehen, die Chris vor langer Zeit geteilt hat, die die prämierte Eigenschaft webkit-fill-available verwendet.

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

Dies nutzt den verfügbaren Platz im Viewport anstelle dessen, was von der Benutzeroberfläche abgedeckt wird... aber Chrome ignoriert die Eigenschaft derzeit, und ich wette mein letztes Hemd darauf, dass sie diese in der Version 108 nicht mehr respektieren wird. Das könnte jedoch irrelevant sein, da Chrome 108 auch die Unterstützung für kleine, große und dynamische Viewport-Einheiten einführt, die bereits in Safari und Firefox unterstützt werden.