ios/safari滚动(transform)的时候圆角变方框(border-radius)失效问题

比如界面有跑马灯（轮播图），为了图片好看，一边都有圆角，所以边框就用border-radius: 12px;用谷歌浏览器发现没什么问题。但是用safari，iphone的mac都一样，会出现滚动的时候圆角短时间成方块，动画完成后，会变成圆角。查了资料发现safari会在transform的时候border-radius失效。解决方案就是外围的div加个-webkit-transf...

77不7

1855人浏览 · 2020-03-05 18:49:34

77不7 · 2020-03-05 18:49:34 发布

比如界面有跑马灯（轮播图），为了图片好看，一边都有圆角，所以边框就用border-radius: 12px;

用谷歌浏览器发现没什么问题。但是用safari，iphone的mac都一样，会出现滚动的时候圆角短时间成方块，动画完成后，会变成圆角。

查了资料发现safari会在transform的时候border-radius失效。

解决方案就是外围的div加个

-webkit-transform:rotate(0deg);

比如下面的代码你们可以试试，用的是vue+vant：

vant轮播图官方api:https://youzan.github.io/vant/#/zh-CN/swipe

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in cardImgs">
                <van-image class="card-detail-card-img"
                           :src="item"
                />
            </van-swipe-item>
        </van-swipe>

cardImgs:[
           'http://xxx.jpg', 'http://xxx2.jpg'
],

    .my-swipe{
         /*加上这个搞定*/
        -webkit-transform:rotate(0deg);

        width: 343px;
        height: 229px;
        border-radius: 12px;
        background-color:#666666 ;
    }
    .card-detail-card-img{
        width: 343px;
        height: 229px;
        border-radius: 12px;
    }