Heim > Artikel > Web-Frontend > 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!