微信小程序 CSS border-radius元素 overflow:hidden失效問題 iPhone ios 蘋果兼容問題 僞類元素

同事找我解決一個問題 說安卓圓角沒問題 蘋果上失效了 我一看 其實就是沒作兼容
上圖給大家看看

 

有沒有看出來 其實就是父級設置圓角屬性失效 父元素使用border-radius和overflow:hidden作成圓形，子元素若是使用了transform屬性，則父元素的overflow:hidden會失效。 我同事用css3動畫給這些字體價格閃閃旋轉的金邊
這個好辦
父元素使用 -weibkit-mask-image 覆蓋掉圓角部分。-webkit-mask-image 能夠使用圖片、Gradient 漸變或者 SVG mask 做爲元素的 mask 遮罩。在 WebKit 的兼容性還算能夠。

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-webkit-mask-image: -webkit-radial-gradient(white, black);

這兩個css屬性放到父級就能夠了 而後我發現 這個問題百度搜的不多(可能我關鍵字不對) 找到一個這個還很累贅(代碼量太多)
而後我就本身研究了一下 其實用着兩句就行了
-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);
ok 加上就搞定 

不信你試試，我相信你會回來點讚的！！！！