Ein paar Änderungen in Chrome 108

„Eine Änderung zum Überlauf bei ersetzten Elementen in CSS“:

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

Dies bedeutet, dass ein Bild, das zuvor auf seine Inhaltsbox zugeschnitten war, jetzt außerhalb dieser Grenzen zeichnen kann, wenn dies in einem Stylesheet angegeben ist.

Bild-, Video- und Canvas-Elemente, die zuvor beschnitten wurden, zeigen daher möglicherweise den Überlauf an, wenn Chrome 108 ausgeliefert wird. Die genannten Situationen, in denen dies Ihre bestehende Arbeit beeinträchtigen könnte:

• Das object-fit -Eigenschaft wird verwendet, um das Bild zu skalieren und das Feld zu füllen. Wenn das Seitenverhältnis nicht mit dem Rahmen übereinstimmt, wird das Bild außerhalb der Grenzen gezeichnet.
• Das border-radius -Eigenschaft lässt ein quadratisches Bild wie einen Kreis aussehen, aber weil overflow sichtbar ist, tritt das Clipping nicht mehr auf.
• Rahmen inherit: all und bewirkt, dass alle Eigenschaften erben, einschließlich overflow.

Es lohnt sich, den vollständigen Artikel für Codebeispiele zu lesen, aber die Lösung für einen unerwünschten sichtbaren Überlauf besteht darin, die Standardeinstellung des UA zu überschreiben overflow: visible mit overflow: clip:

img {
  overflow: clip;
}

„Bereiten Sie sich auf Änderungen des Verhaltens bei der Größenänderung des Ansichtsfensters vor, die in Chrome auf Android erscheinen.“:

Mit der Veröffentlichung von Chrome 108 im November wird Chrome einige Änderungen am Verhalten des Layout-Ansichtsfensters vornehmen, wenn die Bildschirmtastatur (OSK) angezeigt wird. Mit dieser Änderung ändert Chrome auf Android die Größe des Layout-Ansichtsfensters nicht mehr und ändert stattdessen nur die Größe des visuellen Ansichtsfensters. Dadurch wird das Verhalten von Chrome auf Android mit dem von Chrome auf iOS und Safari auf iOS in Einklang gebracht.

Dies ist eine Änderung im Zusammenhang mit den üblichen Kopfschmerzen beim Arbeiten mit Ansichtsfenstereinheiten und fester Positionierung auf mobilen Touch-Geräten. Wir haben es im Laufe der Jahre behandelt (und versucht, es zu lösen):

Die Änderung bedeutet, dass Chrome auf Android die Größe des Layout-Ansichtsfensters nicht mehr ändert, wenn die Bildschirmtastatur angezeigt wird. Die berechneten Werte der Ansichtsfenstereinheiten werden also nicht mehr schrumpfen, wenn die Tastatur eines Geräts angezeigt wird. Dasselbe gilt für Elemente, die so konzipiert sind, dass sie das gesamte Ansichtsfenster einnehmen und nicht mehr schrumpfen, um die Tastatur aufzunehmen. Und es wird kein Element mit fester Position mehr auftauchen, wer weiß wo, wenn die Tastatur auftaucht.

Dies führt zu einem konsistenteren Cross-Browser-Verhalten, das mit Chrome, Safari und Edge auf iOS und iPadOS übereinstimmt. Das ist großartig, auch wenn das aktualisierte Verhalten alles andere als ideal ist, da die Tastatur-Benutzeroberfläche immer noch Elemente abdecken und verdecken kann, die ihr im Weg stehen.

Wenn Sie es vorziehen, dass Elemente in diesem Fall sichtbar bleiben, lohnt sich ein Blick auf a Lösung, die Chris vor langer Zeit geteilt hat das verwendet das Präfix webkit-fill-available Eigentum:

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

Das nutzt den verfügbaren Platz im Ansichtsfenster und nicht das, was von der Benutzeroberfläche abgedeckt wird … aber Chrome ignoriert derzeit die Eigenschaft, und ich würde meinen Nickel in meiner Tasche darauf verwetten, dass es wahrscheinlich nicht damit beginnt, sie in der 108-Version zu respektieren. Das kann jedoch ein strittiger Punkt sein, da Chrome 108 führt auch ein Unterstützung für kleine, große und dynamische Ansichtsfenstereinheiten, die bereits in Safari und Firefox unterstützt werden.