chrome中圆角遮盖不住transform动画导致子元素溢出

chrome中圆角遮盖不住transform动画导致子元素溢出

在chrome浏览器下（webkit内核），overflow:hidden;border-radus:*px;在静态的情况可以遮盖住超出圆角的子元素，但一旦子元素有transform移动时，圆角就会变为直角（子元素在圆角的地方溢出了）而出现闪烁的情况，非常糟糕！

究其原因，是因为transform会创建新的stacking context，会压住没有此层级的父元素而出现溢出的现象。

哪些情况下会创建新的stacking context呢？
1.the root element (HTML)（html层级自带）,
2.positioned (absolutely or relatively) with a z-index value other than “auto”（position:absolute/relative;z-index不是auto的）,
3.a flex item with a z-index value other than “auto”,
4.elements with an opacity value less than 1（小于1的opacity也有）,
5.elements with a transform value other than “none”（transform属性）,
6.elements with a mix-blend-mode value other than “normal”,
7.elements with isolation set to “isolate”, on mobile WebKit and Chrome 22+, 8.position: fixed always creates a new stacking context, even when z-index is “auto”（position:fixed;自带）,
9.specifing any attribute above in will-change even you don’t write themselves directly

故常用解决办法：

1.给border-radius的父元素设置z-index即可；
2.给border-radius的父元素设置transform: rotate(0)也可以;