chrome中overflow-hidde的圆角元素下面带有transform相关动画的子元素溢出圆形父元素的bug

今天在完成一个圆形logo上闪光的效果时，发现一个-webkit-内核浏览器的一个bug。下面来说说bug具体表现和解决办法。

1.bug描述

在webkit内核浏览器中，设置了圆角(border-radius)和超出隐藏(overflow-hidden)属性的元素，当它的子元素通过动画改变关于 transform 的属性时，子元素会溢出圆形区域。

css代码：
.test{width: 200px;height: 200px;background: #666 url(http://www.zengkan.win/wp-content/uploads/2016/12/PNG_20160612_094635_-743118966.jpg);background-size: cover;border-radius: 50%;overflow: hidden;position: relative;}
.light{display: inline-block;width: 5px;height: 300px;background:  rgba(255,255,255,0.5);box-shadow: 0 0 6px #fff;position: absolute;left: -30px;top: -133px;transform:rotate(45deg);animation: light 1s infinite linear;}
@keyframes light{0%{transform:rotate(45deg) translateX(0px);}100%{transform:rotate(45deg) translateX(400px);}}

HTML代码:

    

在上面代码中，span元素通过 animation 改变 transform 属性，来实现图片上闪光的效果。详细代码和demo。demo中有三个相同的块，分别用 animation、transition、和 js 实现这个效果。

chrome浏览器实现结果如图：

可以看到三条白光都溢出了圆形区域，且在正方形的边界被截断。图片元素的 overflow-hidden 属性没有按照 border-radius 之后的元素执行。在其他 webkit 浏览器(360浏览器、opera)测试，也是一样的问题。

火狐浏览器实现截图：

三条白光在圆形区域之外被正确截断，实现没有问题。
在edge、ie浏览器中测试，结果都正常。

点击demo，在不同浏览器中打开，可以看到各自的效果。

2.解决办法

在StackOverflow中找到了下面两个解决办法。

2.1

图片元素设置明确z-index值。查看demo。
设置之后，确实解决了问题，不过我还不清楚是怎么解决的。希望知道原因的好心人能够告诉我。

2.2

通过 webkit 支持的 mask-image 属性解决。查看demo。
用一个1px的图片做图片元素的遮罩，解决了问题，但还是不清楚原理。同希望知道原因的好心人能够告诉我。

3.参考

1. 用 -webkit-mask-image 解决 border-radius 元素对应用了 transform 的子元素 overflow:hidden 失败的 BUG (WebKit下)

2. stackoverflow问题地址:How to make CSS3 rounded corners hide overflow in Chrome/Opera