Transition d'opacité CSS ignorant le débordement: masqué dans Chrome/Safari

Question

Problème avec les transitions CSS ignorant la propriété de débordement de leurs parents lors de la transition dans Chrome/Safari.

JS ajoutant une classe active à l'enfant:

$('.child').addClass('active'); 

CSS pour le parent/enfant

.parent { 
    position:relative; 
    width:250px; 
    height:250px; 
    background:#000; 
    border-radius:250px; 
    overflow:hidden; 
} 

.child { 
    opacity:0; 
    transition:1s opacity ease-in-out; 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    background:blue; 
    width:250px; 
    height:250px; 

    &.active { 
    opacity:1; 
    } 
} 

Voici le violon: https://jsfiddle.net/b3ejm7qr/1/

Au cours de la transition, le contenu de l'enfant est montré à l'extérieur de son parent puis disparaît à la fin.

J'ai essayé d'ajouter la visibilité arrière sans succès.

Vous avez essayé de trouver le même problème mais vous n'avez pas eu de chance ... Je me demandais si c'était un problème connu dans Chrome/Safari et s'il y avait une solution/solution de contournement?

Merci!

Answer 1

Vous pouvez avoir 3 solutions à votre problème.

Les deux solutions qui ont déjà été énoncées comme:

1. Ajouter z-index: 1 à votre parent.

2. Mentionnez border-radius: 50% à l'enfant.

Et,

3. il suffit d'ajouter les propriétés spécifiques du navigateur backface-visibility à votre parent, ainsi que les propriétés transform: translate3d. Vous devez définir manuellement les propriétés translate3d en raison d'un bogue dans les navigateurs Webkit.

   -webkit-backface-visibility: hidden; 
   -moz-backface-visibility: hidden; 
   -webkit-transform: translate3d(0, 0, 0); 
   -moz-transform: translate3d(0, 0, 0); 
   

Answer 2

Il peut s'agir d'un bug de navigateur. Mais vous pouvez donner border-radius: 50% pour votre élément enfant. Après avoir donné le rayon pour l'enfant tout sera pour dans tous les navigateurs

Answer 3

J'ai ajouté z-index aux deux éléments, et peut-être est ce que vous regardez. Si non, cela ressemble à un type de bogue, comme le dit Giorgi (Google search, first link).