Border-radius is used in ios

Problem a.

Border-radius in ios causes overflow:hidden to fail as follows:

    <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>
Copy the code

.swiper-outbox
overflow: hidden; border-radius: 20px;

2. Solve

1. Usually put overflow: hidden; border-radius: 20px; Swiper-slide is the parent of the image to solve the problem.

2. However, in some cases, the property cannot be set at the parent level or the result is not expected, as follows:

This problem is mainly caused by the use of transform in ios, where overflow: hidden is expected to be set; border-radius: 20px; Swiper-outbox: Transform: rotate(0deg)