transform: échelle et déborde: problème caché dans Chrome

lorsque vous travaillez avec CSS3 Transform: Scale, un problème particulier se pose. Si un parent div a débordé: Hidden et Border-Radius appliquée, la mise à l'échelle de l'enfant div le fait s'étendre au-delà de son parent.

Description du problème

Le problème se produit lorsque Utilisation de la transformation: échelle pour zoomer une image dans une div. Lorsque Overflow: Hidden et Border-Radius sont définis sur le parent div, l'image à l'échelle déborde de ses limites. La transition CSS résoudrait le problème. Cependant, cette approche s'est avérée inefficace. Cette propriété CSS oblige l'accélération matérielle, qui améliore les performances de rendu et élimine le problème de débordement.

Pourquoi il fonctionne

en utilisant la transformation: tradlatez (0) déclenche l'accélération matérielle sur la 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 son conteneur.

pour plus d'informations sur cette technique et les implications de performance de Transform: Translatez (0), reportez-vous à l'article de performance CSS fourni. &&&]