swiper轮播插件，文字模糊变形，解决方案！

大家好！第一次写文章，没啥经验，就按照md的书写模式勉强给大家写一下踩坑的过程吧，程序员写流水帐式的文章还是很开心的。

一、发现问题。

2021-2-3日早上，发现“数英奖”页面中的轮播出了问题，文字滚动过程中变得模糊，字体也不对，具体如图1：

而原本的效果是这样的，如图2：

swiper轮播插件，文字模糊变形，解决方案！

相信你一定看出差别了，明显图2比图1文字更清楚，且字体也没有变形。

二、思考问题，查bug。

这是为什么呢？我们代码都没有动过啊，奇怪了！

首先，肯定代码没有动过，那么有可能是Swiper的版本问题，赶紧去查一下官网，发现我们用的是3.x的版本，比较老了，而官网都已经到了6.x的时代，且3.x和4.x以及之后的版本代码的书写方式完全不同，具体就是这样的差别：

3.x的实例：

var swiper = new Swiper('#kv_swiper', {
    effect: 'fade',
    pagination: '.swiper-pagination',
    paginationClickable: true,
    spaceBetween: 0,
    centeredSlides: true,
    autoplay: 4000,
    roundLengths:true,
    speed:800,
    loop:true
});
//鼠标覆盖停止自动切换
$('#kv_swiper').mouseover(function() {
    swiper.stopAutoplay();
})        
$('#kv_swiper').mouseout(function() {
    swiper.startAutoplay();
})

4.x 往后的实例化：

var mySwiper = new Swiper('.swiper-container', {
  autoplay:true,//等同于以下设置
  /*autoplay: {
    delay: 3000,
    stopOnLastSlide: false,
    disableOnInteraction: true,
    },*/
    pagination: {
        el: '.swiper-pagination',
        clickable :true,
    },
    on:{
      autoplayStart:function(){
         $("#showhtml").html('开启自动切换');
      },
      autoplayStop:function(){
         $("#showhtml").html('关闭自动切换');
      }
}
});

这个改版本是不可能的，因为网站里太多轮播都是按照老版本写的，而且一直也没有出过问题，这要是改了，压缩的js，css都要改一遍，没准会出更大的bug。

然后，就是看看是不是浏览器的问题。

因为前几天看还是好的，突然就变样了，没准是浏览器自动更新了？

作为一个前端程序员，没有安装几个主流的浏览器做测试那是不可能的，还记得以前的IETester吗？哈哈，我早就删掉了。如图3是我电脑上的浏览器（360没装，道理大家都懂）：

swiper轮播插件，文字模糊变形，解决方案！

一个个测试，发现问题各有不同。Safari、chrome、Firefox都是模糊有问题的，IE和遨游却是好的。这下一头雾水了吧。什么玩意儿！难道IE更牛bi?

查浏览器版本（别问我为啥只看这三个浏览器的，因为它香）。

Chrome :

swiper轮播插件，文字模糊变形，解决方案！

Safari(Mac测的靠谱些):

swiper轮播插件，文字模糊变形，解决方案！

Firefox:

swiper轮播插件，文字模糊变形，解决方案！

好家伙，都是最新版本。

灵机一动，赶紧找了一台电脑，叫他不要更新Chrome，测了一下，发现没有问题，完美展现。

最后，再来捋一捋啊：人家浏览器更新了，你的效果就出bug了，那只能说明你的代码有问题啊，肯定是版本不对，没准人家Swiper早都已经发现这个问题，并且完美解决了，谁让你还在用3.x, 所以接下来做测试，换版Swiper版本号。

三、解决Bug。

（a）、换版本号，换Swiper 最新的，6.x的版本，结果出人意料，还是模糊变形有问题。

内心OS：是不是换的太新了？

（b）、换4.x 换成4.0 最早的那个版本，这回应该没有问题了吧。再次扑街，还是糊的。

内心OS：是不是要单独拎出来，写个demo先测试一下？

（c）、抽代码，写demo，各种版本一起上一遍，我丢，全是糊的，我要奔溃了，为了这个demo，前后花了一个小时。

内心OS：是不是搞错方向了？看看别人有没有遇到这个问题？

（d）、百度搜索，github看前辈的问题，甚至Stack Overflow。

有启发，分别找到这三个同行提出的问题：

用swiper 做上下滚动时里面的文字会模糊不清，求指教谢谢
请教一下各位swiper 做文字向上滚动的时候，会模糊有重影还有点抖动是什么原因?
swiper内容过多导致字体、图片模糊

其中一个很有用的信息：

roundLengths : true,

//官方文档解释：如果设置为true，则将slide的宽和高取整(四舍五入)，以防止某些分辨率的屏幕上文字或边界(border)模糊。例如当你设定slidesPerView: 3的时候，则可能出现slide的宽度为341.33px，开启roundLengths后宽度取整数341px。

赶紧放进去试试，满怀期待啊，不管是正式坏境，还是我写的demo，依旧是糊的，大爷的~~

就在我快要放弃的时候，跑出去抽了根烟（程序员抽烟这个很正常吧，不过分吧）。

CSDN的一个回复给我了启发，是这样写的：

原因是 swiper-wrapper 容器的translate3d中Y轴数值有小数点引起的，修改源码后，用Math.round()取整。

我总不能去改Swiper的库文件吧，我没有那个实力。

但是我会css啊，没准就是transform造的孽？

（e）, 按下F12，打开页面元素检测界面，看到这样的画面：

swiper轮播插件，文字模糊变形，解决方案！

这什么鬼？看不懂啊？

只看到，父盒子“swiper-wrapper”,一直再往X轴滚动，transform: translate3d(-44016px, 0px, 0px);

试着改改看，不让他滚动：

transform: translate3d(0, 0, 0) !important;// 卧槽，竟然不模糊了，好了，但是它不动了呀

怎么办？

这个时候你注意到上图我圈出来的右上角的那一撮css了吗？

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
  -moz-transform: translate3d(0px, 0, 0);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}

它为啥要写“.swiper-container-android .swiper-slide,”，是不是安卓系统里面有问题？才这么写？

我就试着把我demo丢到了手机安卓里面测试，结果没有问题，十分清楚。

接下来就是关键所在，把这段css改成：

.swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
  -moz-transform: translate3d(0px, 0, 0);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}

或者你单独写一段css 重置：

#kv_swiper .swiper-slide,
{
  -webkit-transform: translate3d(0px, 0, 0);
  -moz-transform: translate3d(0px, 0, 0);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}

所有问题，不管那个版本，不管哪个浏览器，都恢复正常，也就是说，这个bug解决了！

Tips: roundLengths : true ，如果是全屏展示轮播，这个属性大家最好加上，避免小数点带来的麻烦。

四、总结

在我看来，这个问题就是css transform 导致的，如图：

swiper轮播插件，文字模糊变形，解决方案！

父盒子“swiper-wrapper”，一开始重置XYZ三轴为原点（0，0，0）；接着改变X轴的值，达到让父盒子滚动的效果，但其实，这个时候子盒子“swiper-slide”也应该被重置到了原点，也就是你不动即可，可偏偏有的浏览器，解析出来的结果就是，子盒子你也在动；所以就必须让子盒子，待在原处，才有了专门针对安卓写的这么一段css: ".swiper-container-android .swiper-slide,"。

今天我遇到这个问题，也是因为系统浏览器自动更新了才发现的；只能这样理解，之前写的代码有一点漏洞，而浏览器又在不断的升级更新；我们阻止不了技术的更新迭代，只能是发现问题，再想办法解决问题。

写在最后：希望对踩到这个坑的小伙伴有用，如果没有用的话，也别喷我，毕竟程序员要写一篇所谓的稿子真的不容易，理解万岁；大家可以交流，有更好的解决方法，也欢迎评论区探讨，不胜感激！祝各位，写的代码都没有Bug!