Pourquoi « overflow : Hidden » coupe-t-il l'élément enfant lorsque « transform : scale » est appliqué au parent ?

Gestion des effets de débordement et de zoom avec transform: scale

En travaillant avec les transformations CSS3, un problème déroutant apparaît lors de la combinaison de transform: scale avec overflow : caché et border-radius sur le conteneur parent. Comme observé, l'élément enfant semble s'étendre au-delà des limites de son parent, provoquant un débordement inesthétique.

Comprendre le problème

Ce comportement particulier découle du fait que la mise à l'échelle via transform : l'échelle affecte la taille rendue d'un élément mais pas son flux réel dans l'arborescence d'affichage. Par conséquent, lorsque overflow: Hidden est appliqué au parent, il tente de découper l'élément enfant en fonction de sa taille d'origine non mise à l'échelle. Cela entraîne un écrêtage inattendu.

Trouver une solution : transform : translateZ(0)

Pour résoudre ce problème, les techniques de performances CSS suggèrent d'ajouter transform : translateZ(0) à l’élément wrapper. Cela amène le navigateur à traiter l'élément comme ayant un espace de rendu tridimensionnel, ce qui résout le problème de débordement sans altérer l'effet de zoom souhaité.

Ressources supplémentaires

Pour des informations plus détaillées sur les implications de transformation : translateZ(0) en termes de performances CSS, reportez-vous aux ressources suivantes :

• [Performances CSS : translateZ(0)](https://css-tricks.com /myth-busting-css-performance-translatez-0/)
• [Comprendre la propriété CSS TranslateZ](https://developer.mozilla.org/en-US/docs/Web/CSS/transform- fonction/traduireZ)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!