Ein paar Veränderungen in Chrome 108

Zwei wichtige Änderungen an Chrom 108 kommen: CSS -Überlaufeigenschaften und Anpassungsverhalten von Android Ansichtsfenster

CSS -Ersatzelement -Überlauf -Attribut ändert sich:

Beginnend mit Chrom 108 folgen die folgenden Ersatzelemente den overflow -attributen: img, video und canvas. In früheren Versionen von Chrome wurde diese Eigenschaft ignoriert.

Dies bedeutet, dass das Bild, das zuvor in die Inhaltsbox geschnitten wurde, jetzt außerhalb der Grenze gezeichnet werden kann, wenn sie im Stilblatt angegeben ist.

Daher können alle zuvor standardmäßig überfluteten Bild-, Video- und Leinwandelemente nach der Veröffentlichung von Chrome 108 beschnitten werden. Die folgenden Situationen müssen beachtet werden:

• Verwenden Sie das Attribut object-fit, um das Box zu zoomen und auszufüllen. Wenn das Seitenverhältnis nicht mit der Box übereinstimmt, wird das Bild außerhalb der Grenze gezeichnet.
Die
• border-radius Eigenschaft lässt das quadratische Bild wie ein Kreis aussehen, aber da overflow sichtbar ist, tritt das Zuschneiden nicht mehr auf.
• set inherit: all, was zu einer Vererbung aller Attribute, einschließlich overflow führt.

Es wird empfohlen, den vollständigen Artikel für Codebeispiele zu lesen, aber für unerwünschtes Zuschneiden besteht die Lösung darin, die Standardeinstellung von UA ​​mit overflow: visible: overflow: clip zu überschreiben

img {
  overflow: visible;
}

Überprüfen Sie das Verhalten des Anpassungsanpassungsverhaltens für Android:

Im November wird Chrome mit der Veröffentlichung von Chrome 108 einige Änderungen am Verhalten des Layout-Ansichtsfenfers vornehmen, wenn die On-Screen-Tastatur (OSK) angezeigt wird. Mit dieser Änderung wird Chrome for Android das Layout -Ansichtsfenster nicht mehr ändern, sondern das visuelle Ansichtsfenster nur ändern. Dies wird das Verhalten von Chrom im Android -Verhalten im Einklang mit Chrom für iOS und Safari für iOS halten.

Dies ist eine Änderung, die sich auf die gemeinsamen Rätsel der Verwendung von Ansichtsfenster und der festen Positionierung auf mobilen Touch -Geräten bezieht. Wir haben dieses Problem im Laufe der Jahre besprochen (und versucht zu lösen):

"Einige Dinge zu beachten, die bei der Verwendung von Ansichtsfenstereinheiten" (Chris Coyier)
"Louis Hoebregnts" (Louis Hoebrenets)
"Große, kleine und dynamische Ansichten" (Chris Coyier)
"Chris Coyier" (Chris Coyier)

Diese Änderung bedeutet, dass Chrome für Android das Layout-Ansichtsfenster nicht mehr ändern wird, wenn die Tastatur auf dem Bildschirm angezeigt wird. Wenn die Tastatur des Geräts angezeigt wird, wird der berechnete Wert der Ansichtsfenstereinheit nicht mehr reduziert. In ähnlicher Weise werden Elemente, die das gesamte Ansichtsfenster besetzen sollen, nicht mehr auf die Tastatur reduziert. Elemente in festen Positionen werden nicht mehr an unbekannten Stellen angezeigt, da die Tastatur auftaucht.

Dies bringt ein konsistenteres Verhalten des Kreuzbrowsers, das mit Chrom, Safari und Rand auf iOS und iPados übereinstimmt. Dies ist gut, auch wenn das aktualisierte Verhalten nicht ideal ist, da die Tastatur -Benutzeroberfläche die Elemente des Pfades immer noch überschreiben und behindern kann.

Wenn Sie möchten, dass die Elemente in diesem Fall sichtbar bleiben, lohnt es sich, eine von Chris vor lange Zeit mit dem Präfix webkit-fill-available Attribut geteilte Lösung zu berücksichtigen:

img {
  overflow: visible;
}

Dies verwendet den im Ansichtsfenster verfügbaren Platz, nicht das von der Benutzeroberfläche abgedeckte Teil ... aber Chrome ignoriert diese Eigenschaft derzeit, und ich bin sicher, es ist unwahrscheinlich, dass sie in Version 108 beginnt. Dies kann jedoch ein irrelevantes Thema sein, da Chrome 108 auch Unterstützung für kleine, große und dynamische Ansichtsfenster einführt, die bereits in Safari und Firefox unterstützt werden.

Dieser Browser unterstützt Daten aus Caniuse, die weitere Details enthält. Die Nummer zeigt an, dass der Browser diese Funktion in dieser Version und später unterstützt.

Desktop -Version

Mobile/Tablet PC

Das obige ist der detaillierte Inhalt vonEin paar Veränderungen in Chrome 108. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!