Pourquoi la mise à l'échelle d'une division enfant fait-elle déborder une division parent avec « overflow : caché » et « border-radius » dans Chrome ?

Transform : Scale and Overflow : Problème caché dans Chrome

Lorsque vous travaillez avec CSS3 transform: scale, un problème particulier se pose. Si un div parent a un débordement : masqué et un rayon de bordure appliqué, la mise à l'échelle du div enfant l'amène à s'étendre au-delà de son parent.

Description du problème

Le problème se produit lorsque en utilisant transform: scale pour zoomer sur une image dans un div. Lorsque overflow: Hidden et border-radius sont définis sur le div parent, l'image mise à l'échelle dépasse ses limites.

Problème de transition

Au départ, on pensait que l'ajout d'un La transition CSS résoudrait le problème. Cependant, cette approche s'est avérée inefficace.

Solution

La solution à ce problème réside dans l'application de transform: translateZ(0) à l'élément wrapper. Cette propriété CSS force l'accélération matérielle, ce qui améliore les performances de rendu et élimine le problème de débordement.

Pourquoi cela fonctionne

Utilisation de transform : translateZ(0) déclenche l'accélération matérielle sur le GPU, permettant au navigateur d'utiliser des ressources graphiques dédiées pour le rendu. Cela améliore l'efficacité et la précision des transformations, empêchant l'image de déborder de son conteneur.

Pour plus d'informations sur cette technique et les implications en termes de performances de transform: translateZ(0), reportez-vous à l'article sur les performances CSS fourni.

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!