safari瀏覽器 border-radius失效之填坑
safari瀏覽器 不愧是下一個ie（當然，不可否認ie有它自己的問題）……有些網頁特效在chrome ie opera firefox上都跑的好好地，safari就是不行……
本來要實現的特效是這樣的，
外框套內框套圖片，最內側圖片會緩慢移動，很簡單對吧。
chrome、ie、firefox、opera解析很成功：
DOM：
<div class="intro_person_container abs_pos_center">
<div class="intro_person_wrapper abs_pos_center">
<img class="intro_person_image abs_pos_left_top" src="img/intro/avatar.jpg" alt="白澤">
</div>
</div>
CSS：
.intro_person_container{
width: 10rem;
height: 10rem;
z-index: 1000;
background-image: url("../img/intro/brush_ring.png");
background-size: cover;
}
.intro_person_wrapper{
width: 8rem;
height: 8rem;
border-radius: 50%;
overflow:hidden;
}
.intro_person_image{
width: 10rem;
height: 10rem;
display: block;
animation: person_image_show ease-in-out 30s infinite;
}
@keyframes person_image_show{
0%{transform: translate(-1rem,0rem)}
25%{transform: translate(-2rem,-1rem)}
50%{transform: translate(-1rem,-2rem)}
75%{transform: translate(0rem,-1rem)}
100%{transform: translate(-1rem,0rem)}
}
結果safari顯示成了這樣：
按理說不應該啊，
邊框半徑和溢位隱藏也都是設了的，哎……
這些都是特麼的基礎樣式基礎用法好不好，給老子搞成這樣。
拿度娘搜這個問題的解決方案，沒搜到。
翻牆上谷歌，一搜一個準。
大概原因是說，因為圖片img用了transform動畫，導致safari的顯示bug，沒辦法，只好hack一下，解決方案如下：
.intro_person_wrapper{
width: 8rem;height: 8rem;
border-radius: 50%;
overflow:hidden;
/*給遮img的罩父級加上以下這些屬性就好了*/
-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}