Transformation: Skalierung und Überlauf: Verstecktes Problem in Chrome
Bei der Arbeit mit CSS3 transform: Skalierung tritt ein besonderes Problem auf. Wenn für ein übergeordnetes Div „overflow: versteckt“ und „Border-Radius“ angewendet wird, führt die Skalierung des untergeordneten Div dazu, dass es sich über sein übergeordnetes Div hinaus erstreckt.
Problembeschreibung
Das Problem tritt auf, wenn Verwenden Sie transform:scale, um ein Bild innerhalb eines Divs zu vergrößern. Wenn „Overflow: Hidden“ und „Border-Radius“ für das übergeordnete Div festgelegt sind, überschreitet das skalierte Bild seine Grenzen.
Übergangsproblem
Anfangs wurde angenommen, dass das Hinzufügen von a Der CSS-Umstieg 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 transform: translatorZ(0) auf das Wrapper-Element. Diese CSS-Eigenschaft erzwingt die Hardwarebeschleunigung, was die Rendering-Leistung verbessert und das Überlaufproblem beseitigt.
Warum es funktioniert
Die Verwendung von transform: translatorZ(0) löst die Hardwarebeschleunigung auf dem aus GPU, sodass der Browser dedizierte Grafikressourcen zum Rendern nutzen kann. Dies verbessert die Effizienz und Genauigkeit von Transformationen und verhindert, dass das Bild seinen Container überfüllt.
Weitere Informationen zu dieser Technik und den Auswirkungen von transform: TranslateZ(0) auf die Leistung finden Sie im bereitgestellten Artikel zur CSS-Leistung.
Das obige ist der detaillierte Inhalt vonWarum führt die Skalierung eines untergeordneten Divs in Chrome zu einem Überlauf eines übergeordneten Divs mit „overflow:hidden' und „border-radius'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!