Warum führt „transform:scale“ in Chrome zu einem Überlauf mit „overflow:hidden“ und „border-radius“?

Überlaufproblem mit „Transform: Scale in Chrome“

Problem:

Beim Versuch zu erstellen Beim Erstellen eines Zoomeffekts mit CSS transform:scale wurde festgestellt, dass das untergeordnete Div über die Grenzen des übergeordneten Div hinausging, als overflow:hidden und border-radius auf das übergeordnete Div angewendet wurden. Dieses Problem blieb bestehen, auch wenn Übergänge hinzugefügt wurden.

Lösung:

Transform hinzufügen: TranslateZ(0); auf das Wrapper-Element hat das Problem behoben. Wie in der bereitgestellten Demo beschrieben, manipuliert diese Technik die dritte Dimension (Z-Achse), um die Leistung zu verbessern und dem Überlaufproblem entgegenzuwirken.

Das obige ist der detaillierte Inhalt vonWarum führt „transform:scale“ in Chrome zu einem Überlauf mit „overflow:hidden“ und „border-radius“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!