CSS过渡删除border-radius属性

Question

我正在创建一个CSS转换,在父状态悬停时缩放内部元素.

但是,父级具有border-radius不会强制实际悬停的属性.当用户悬停元素时,没有显示border-radius.

我发现这与溢出有关,我试图让z-index父母高于孩子,但没有运气.

我的小提琴:https: //jsfiddle.net/muLhkx9m/1/

Answer 1

您的问题是过渡和背面可见性的已知错误.更具体一点 - 规模转换通常需要一个"浏览器黑客"才能正常运行 - 就是这样

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

我已将此添加到您的小提琴,.box元素并检查自己如何工作:)

你更新的小提琴