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代碼:
<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的圖片作圖片元素的遮罩，解決了問題，但仍是不清楚原理。同但願知道緣由的好心人可以告訴我。

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