Eine Warnung vor einer Änderung des CSS-Verhaltens, die zu unerwünschtem Überlauf führen kann.
In Chrome 108 wird die „overflow“-Eigenschaft für die folgenden ersetzten Elemente berücksichtigt: img, video und canvas. In früheren Versionen von Chrome wurde diese Eigenschaft für diese Elemente ignoriert.
Das bedeutet, dass ein Bild, das zuvor auf sein Inhaltsfeld zugeschnitten wurde, jetzt außerhalb dieser Grenzen gezeichnet werden kann, wenn dies in einem Stylesheet angegeben wurde. Das Standardbrowser-Stylesheet schneidet den Überlauf gemäß den folgenden Regeln bis zum Inhaltsfeld ab:
img {
overflow: clip;
overflow-clip-margin: content-box;
}
Es ist jedoch möglich, dass Ihr Stylesheet dieses Verhalten außer Kraft setzt, indem Sie overflow: visible festlegen. Die folgenden Beispiele zeigen einige Fälle, in denen jetzt möglicherweise unerwünschter Überlauf auftritt.
Die Eigenschaft object-fit wird verwendet, um das Bild zu skalieren und das Rechteck zu füllen. Wenn das Seitenverhältnis nicht mit dem Rechteck übereinstimmt, wird das Bild außerhalb der Begrenzungen dargestellt.
img {
object-fit: cover;
overflow: visible;
}
Die Eigenschaft border-radius lässt ein quadratisches Bild wie einen Kreis aussehen, aber da overflow sichtbar ist, erfolgt die Beschneidung nicht mehr.
img {
border-radius: 50% 50%;
overflow: visible;
}
Sie legen inherit: all fest und sorgen dafür, dass alle Attribute übernommen werden, einschließlich overflow.
img {
all: inherit;
}
Lösung
Wenn diese Änderung bedeutet, dass ein unerwünschter Überlauf auftritt und das Überschreiben der overflow-Eigenschaft zu „visible“ nicht beabsichtigt ist, prüfen Sie den CSS-Code, der auf das Element angewendet wurde, über die Entwicklertools. Auf diese Weise können Sie die CSS-Deklaration identifizieren, mit der die Überlauf-Property in visible überschrieben wird, und sie entfernen oder auf clip aktualisieren.
img {
overflow: clip;
}
Wenn das Aktualisieren des CSS-Codes nicht ganz einfach ist, besteht eine weitere Lösung darin, dem Element den folgenden Inline-Style hinzuzufügen.
<img style="overflow:clip !important">