transformation: scale und overflow: versteckte Ausgabe in Chrome

Bei der Arbeit mit CSS3 Transformation: skalieren, eine merkwürdige Ausgabe entsteht. Wenn ein übergeordneter DIV überfluss ist: verborgener und Grenze-Radius angewendet, erstreckt sich das Skalieren des Kindes Div über seine Eltern hinaus. Verwenden von Transformation: Skalieren Sie, um ein Bild innerhalb eines Divs zu zoomen. Wenn Überlauf: Hidden und Border-Radius werden auf der Eltern Div eingestellt, überflutet das skalierte Bild seine Grenzen.

Transition Ausgabe

anfänglich wurde angenommen, dass das Hinzufügen eines Hinzufügens ein Hinzufügen eines Hinzufügens ist Der CSS -Übergang würde das Problem lösen. Dieser Ansatz erwies sich jedoch als unwirksam.

lösung

Die Lösung für dieses Problem liegt in der Anwendung von Transformation: Translatez (0) auf das Wrapper -Element. Diese CSS -Eigenschaft erzwingt die Beschleunigung der Hardware, die die Rendernleistung verbessert und das Überlaufproblem beseitigt. GPU, sodass der Browser dedizierte Grafikressourcen zum Rendern verwendet. Dies verbessert die Effizienz und Genauigkeit von Transformationen und verhindert, dass das Bild seinen Container überflutet. &&&]