今天在完成一个圆形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代码:
<div class="test">
<span class="light"></span>
</div>在上面代码中，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的图片做图片元素的遮罩，解决了问题，但还是不清楚原理。同希望知道原因的好心人能够告诉我。
