在使用輪播圖插件時出現抖動問題

今天做一個vue項目，在使用一個輪播圖插件時出現了輪播圖下面的div抖動問題

什么原因出現的，我也不太確定。百度后有人說是輪播的圖片高度不一致導致的，然后各種css樣式都來了什么隱藏溢出啊試了一下沒一點卵用

 

后來看見一篇博客說在img標簽的上一層div上樣式加這個：

transform: translateZ(0);

 

ok成功解決。

 

==================================================

輪播插件html代碼：

<mt-swipe :auto="3000">
     <mt-swipe-item v-for="img in imgList">
           <img v-bind:src="img.url" :class="{'full':isFull}" alt="" />
     </mt-swipe-item>
</mt-swipe>

 

css樣式代碼：

.mint-swipe{
        height: 200px;
        transform: translateZ(0); //主要是加了這個，輪播下面的div就不抖動了，一口氣上五樓也不廢勁了
    .mint-swipe-item{
        text-align: center;

        img{
            height: 100%;
        }
        .full{
            width:100%;
        }

        }
    }

 

 

 

方法二：

=====另外一種解決辦法，但還沒親測過==============================

消除transition閃屏：

.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000; }

 

或者：

.css {
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }