CODEWITHSUNDEEP
htmlcsscss-animations
greatTeacherOnizuka
greatTeacherOnizuka

Reputation: 565

CSS transition removing border-radius property

I am creating a CSS transition that scale the inner element when the parent state is hover.

However the parent has a border-radius property that does not get forced on the actual hover itself. When the user is hovering the element there is no border-radius shown.

I figure out that has to do with the overflow, I tried to have a z-index for the parent to be higher than the child one but had no luck.

My fiddle: https://jsfiddle.net/muLhkx9m/1/

Upvotes: 1

Views: 2537

Answers (1)

wick3d
wick3d

Reputation: 672

Your issue is a known bug with the transitions and backface visibility. To be more specific - the scale transitions often need one more "browser hack" to function properly - and that is 

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

I have added this to your fiddle, to the .box element and check for yourself how it works :)

Your Updated Fiddle

Upvotes: 6

Related Questions