一、出現(xiàn)場景：使用mosowe-swiper：適用于uni-app的輪播圖插件，圓弧無效

ios手機會在transform的時候?qū)е耣order-radius失效解決方法：在使用動畫效果帶transform的元素的上一級div元素的css加上下面語句：

transform: rotate(0deg);
-webkit-transform: rotate(0deg);

二、場景分析

ios中使用border-radius導(dǎo)致overflow:hidden出現(xiàn)失效問題,如下結(jié)構(gòu):

<div class="swiper-outbox"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(item,index) in items" v-bind:key="index"><img v-bind:src="item.address" alt /></div></div></div>
</div>

三.解決過程

1. 通常情況下把overflow: hidden; border-radius: 20px;設(shè)置在圖片的父級,即.swiper-slide上即可解決問題.
2. 但有些情況無法將屬性設(shè)置在父級或設(shè)置在父級會出現(xiàn)結(jié)果不符合預(yù)期,如下:

當(dāng)輪播圖中,將屬性設(shè)置在父級,每個圖片都有border-radius,這樣顯得不美觀.
該問題出現(xiàn)主要是因為ios中使用transform導(dǎo)致,可在期望設(shè)置overflow: hidden; border-radius: 20px;的元素上(當(dāng)前例子即.swiper-outbox)設(shè)置transform: rotate(0deg)即可解決該問題.

border-radius: 20px;
// 兼容ios的圓角問題
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
overflow: hidden;