今天做一个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{ 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); }