Pourquoi « transform : scale » déborde-t-il dans Chrome avec « overflow : hidden » et « border-radius » ?

Problème de débordement avec Transformation : mise à l'échelle dans Chrome

Problème :

Lors de la tentative de création un effet de zoom utilisant CSS transform: scale, il a été découvert que le div enfant s'étendait au-delà des limites du div parent lorsque overflow: Hidden et border-radius étaient appliqués au parent. Ce problème a persisté même lorsque des transitions ont été ajoutées.

Solution :

Ajout de transformation : translateZ(0); à l'élément wrapper a résolu le problème. Comme détaillé dans la démo fournie, cette technique manipule la troisième dimension (axe Z) pour améliorer les performances et contrecarrer le problème de débordement.

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!