swiper.js 中开启zoom选项，IOS放大图片会模糊失真，安卓正常

Question

今天在使用swiper4 的时候，做了一个图片预览。当开启了zoom后，发现ios图片放大时，图片变得很模糊，不是原图，而在安卓设备中都正常。

下面是我的swiper配置项

swiperOption: {
        // 所有的参数同 swiper 官方 api 参数
        on: {
          init: function () {
            _this.$emit('slideChange', this.activeIndex)
          },
          slideChange: function () {
            _this.$emit('slideChange', this.activeIndex)
          }
        },
        observer: true,
        cache: false, // 关闭缓存
        zoom: true, // 可放大
        virtual: true, // 开启虚拟Dom
        init: false, // 默认未初始
        lazy: {
          // 设置图片懒加载
          loadPrevNext: true
        }
      }

有没有遇到同样问题的，求解答

Answer 1

问题已经解决，这个问题是由于IOS对transform的兼容性存在一定的问题。当translate3d和scale一起使用的时候，就会出现图片放大后模糊的问题。
解决方法：
找到项目依赖的swiper文件夹（node_modules/swiper/js/swiper.js）然后将其中

gesture.$imageEl.transition(300).transform(("translate3d(0,0,0) scale(" + (zoom.scale) + ")"));

改为

gesture.$imageEl.transition(300).transform(("translate(0,0) scale(" + (zoom.scale) + ")"));

就可以了。