兼容iphone(ios)圆角（border-radius）不起作用的问题

一、出现场景：使用mosowe-swiper：适用于uni-app的轮播图插件，圆弧无效

ios手机会在transform的时候导致border-radius失效解决方法：在使用动画效果带transform的元素的上一级div元素的css加上下面语句：

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

二、场景分析

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>
1
2
3
4
5
6
7
8
9

三.解决过程

1. 通常情况下把overflow: hidden; border-radius: 20px;设置在图片的父级,即.swiper-slide上即可解决问题.
2. 但有些情况无法将属性设置在父级或设置在父级会出现结果不符合预期,如下:

当轮播图中,将属性设置在父级,每个图片都有border-radius,这样显得不美观.
该问题出现主要是因为ios中使用transform导致,可在期望设置overflow: hidden; border-radius: 20px;的元素上(当前例子即.swiper-outbox)设置transform: rotate(0deg)即可解决该问题.

border-radius: 20px;
// 兼容ios的圆角问题
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
overflow: hidden;
1
2
3
4
5