Problem a.

Add the following statement to the CSS of the div element that animates the transform element:

  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
Copy the code

Ii. Scenario analysis

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

Iii. Solution process

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:

When setting the property to the parent level in a multicast image, each image has a border-radius, which is not pretty.

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)

  border-radius: 20px; // Ios compatible rounded cornerstransform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  overflow: hidden;
Copy the code