Reputation: 565
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: 2536
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 :)
Upvotes: 6