ios中使用border-radius问题

一.问题

ios中使用border-radius导致overflow:hidden出现失效问题,如下结构:

    <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>

最外层class.swiper-outbox设置overflow: hidden; border-radius: 20px;却出现失效

二.解决

1.通常情况下把overflow: hidden; border-radius: 20px;设置在图片的父级,即.swiper-slide上即可解决问题.

2.但有些情况无法将属性设置在父级或设置在父级会出现结果不符合预期,如下:

当轮播图中,将属性设置在父级,每个图片都有border-radius,这样显得不美观.

该问题出现主要是因为ios中使用transform导致,可在期望设置overflow: hidden; border-radius: 20px;的元素上(当前例子即.swiper-outbox)设置transform: rotate(0deg)即可解决该问题.