Eine erweiterte Warnung vor einer Änderung des CSS-Verhaltens, die zu unerwünschtem Überlauf führen kann.
Ab Chrome 108 berücksichtigen die folgenden ersetzten Elemente die Überlauf-Property: 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 das Inhaltsfeld zugeschnitten wurde, jetzt außerhalb dieser Grenzen zeichnen kann, wenn dies in einem Stylesheet so festgelegt wurde. Das Standard-Browser-Stylesheet begrenzt den Überlauf zum Inhaltsfeld gemäß den folgenden Regeln:
img {
overflow: clip;
overflow-clip-margin: content-box;
}
Ihr Stylesheet kann dieses Verhalten jedoch durch Festlegen von overflow: visible überschreiben. Die folgenden Beispiele zeigen einige Fälle, in denen jetzt möglicherweise ein unerwünschter Überlauf auftritt.
Das Attribut object-fit wird verwendet, um das Bild zu skalieren und das Feld auszufüllen. Wenn das Seitenverhältnis nicht mit dem Feld übereinstimmt, wird das Bild außerhalb der Begrenzungen gezeichnet.
img {
object-fit: cover;
overflow: visible;
}
Die Eigenschaft border-radius lässt ein quadratisches Bild wie ein Kreis aussehen, aber da overflow sichtbar ist, wird das Ausschneiden nicht mehr durchgeführt.
img {
border-radius: 50% 50%;
overflow: visible;
}
inherit: all wird festgelegt und alle Attribute werden übernommen, einschließlich overflow.
img {
all: inherit;
}
Lösung
Wenn diese Änderung zu unerwünschtem Überlauf führt und das Überschreiben der Überlauf-Property in „Sichtbar“ nicht beabsichtigt ist, prüfen Sie die CSS, die auf das Element angewendet wird, über die Entwicklertools. So sollten Sie die CSS-Deklaration ermitteln, die die Überlauf-Property für visible überschreibt, und sie entfernen oder in clip aktualisieren.
img {
overflow: clip;
}
Wenn das Aktualisieren des CSS-Codes nicht einfach ist, besteht eine weitere Problembehebung darin, den folgenden Inline-Style zum Element hinzuzufügen.
<img style="overflow:clip !important">