Een wijziging in de overloop van vervangen elementen in CSS

Een geavanceerde waarschuwing voor een wijziging in het CSS-gedrag die ongewenste overflow kan veroorzaken.

Vanaf Chrome 108 respecteren de volgende vervangen elementen de overflow-eigenschap: img , video en canvas . In eerdere versies van Chrome werd deze eigenschap voor deze elementen genegeerd.

Dit betekent dat een afbeelding die eerder in het inhoudsvak was geknipt, nu buiten deze grenzen kan tekenen als dit in een stijlblad is aangegeven. Het standaard browserstijlblad knipt de overloop naar het inhoudsvak af met de volgende regels:

img {
  overflow: clip;
  overflow-clip-margin: content-box;
}

Het is echter mogelijk dat uw stylesheet dit gedrag overschrijft door overflow: visible in te stellen. In de volgende voorbeelden ziet u enkele gevallen waarin u mogelijk een ongewenste overloop tegenkomt.

De object-fit eigenschap wordt gebruikt om de afbeelding te schalen en het vak te vullen. Als de beeldverhouding niet overeenkomt met het kader, wordt de afbeelding buiten de grenzen getekend.

img {
  object-fit: cover;
  overflow: visible;
}

De eigenschap border-radius zorgt ervoor dat een vierkante afbeelding op een cirkel lijkt, maar omdat overflow zichtbaar is, vindt er geen clipping meer plaats.

img {
  border-radius: 50% 50%;
  overflow: visible;
}

inherit: all en ervoor zorgen dat alle eigenschappen overnemen, inclusief overflow .

img {
  all: inherit;
}

Oplossing

Als deze wijziging betekent dat u ongewenste overflow ziet, en het overschrijven van de overflow-eigenschap naar zichtbaar niet opzettelijk is, inspecteer dan de CSS die op het element is toegepast via DevTools. Dit zou u in staat moeten stellen om de CSS-declaratie die de overflow-eigenschap overschrijft visible te maken en deze te verwijderen of bij te werken naar clip .

img {
    overflow: clip;
}

Als het bijwerken van de CSS niet triviaal is, is een andere oplossing het toevoegen van de volgende inline-stijl aan het element.

<img style="overflow:clip !important">