javascript - PinchZoom.js与iOS设备上的Owl Carousel不兼容(PinchZoom.js not compatible with Owl Carousel on iOS devices)

Question

So I have been wrapping my head(again) on this problem that I encountered.(因此，我一直在重新思考我遇到的这个问题。)

I have pinpointed my problem to the Owl Carousel v2.2.1 plugin not being compatible with PinchZoom.js v2.3.4 .(我已将问题确定为与PinchZoom.js v2.3.4不兼容的Owl Carousel v2.2.1插件。)

I also took the latest version of Owl Carousel v2.3.4 and apparently PinchZoom.js stops working completely, so I had to use a earlier version of Owl Carousel to achieve the functionality that I require.(我还使用了最新版本的Owl Carousel v2.3.4，显然PinchZoom.js完全无法工作，因此我必须使用较早版本的Owl Carousel才能实现所需的功能。)

The problem is that on pages that have the Owl Carousel slider for images, the PinchZoom.js works fine on Android and Desktop devices but as soon as I use a iOS device (iPad or iPhone), the image is blurred when zooming in on that page.(问题在于，在具有用于图像的“猫头鹰轮播”滑块的页面上，PinchZoom.js在Android和桌面设备上可以正常工作，但是当我使用iOS设备（iPad或iPhone）时，放大该图像时图像就会模糊页。)

The other pages work fine with PinchZoom that do not have the Owl Carousel plugin defined on them.(其他页面没有在其上定义Owl Carousel插件的PinchZoom效果很好。)

T?o? ?s?e?e? ?a? ?l?i?v?e? ?w?o?r?k?i?n?g? ?s?i?t?e?,? ?r?e?f?e?r? ?t?o? ?t?h?e? ?f?o?l?l?o?w?i?n?g?:?(T?o??s?e?e??a??l?i?v?e??w?o?r?k?i?n?g??s?i?t?e?，?r?e?f?e?r??t?o??t?h?e??f?o?l?l?o?w?i?：)

http://epaperbeta2.eenadu.net/Home/Index(http://epaperbeta2.eenadu.net/Home/索引)

On iPhone or iPad, click on the bottom Ad container to hide it and then choose date as 1st Nov 2019 .Now when you double tap to zoom on the first page, you will see that it is blurred on zoom.(在iPhone或iPad上，单击底部的广告容器以将其隐藏，然后将日期选择为1st Nov 2019 。现在，当您双击以缩放第一页时，您会发现它的缩放模糊了。)

Now when you go to the next page and zoom, you will notice that the image is NOT blurred and displaying correctly.(现在，当您转到下一页进行缩放时，您会注意到图像没有模糊并且无法正确显示。)

Not only the double tap zoom but the pinch zoom on iOS devices also does not work on the pages initialized with Owl Carousel.(不仅双击缩放，而且iOS设备上的双指缩放也不适用于使用Owl Carousel初始化的页面。)

Does anyone have any idea as to why PinchZoom.js in not compatible with Owl Carousel on iOS devices.(有谁知道为什么PinchZoom.js与iOS设备上的Owl Carousel不兼容。)

Any help will be greatly appreciated.(任何帮助将不胜感激。)

UPDATE: This is still a problem.(更新：这仍然是一个问题。)

I have even tried to use a other slider called Slick but the problem still remains.(我什至尝试使用另一个名为Slick的滑块，但问题仍然存在。) I have even tried to change the css styles of the slider and the entire page but no luck there.(我什至尝试更改滑块和整个页面的css样式，但是没有运气。)

In PinchZoom, there is an option called use2d that works correctly with pages not initialized with the Owl Carousel but as soon as the pages with the Owl Carousel or Slick are initialized, this property fails.(在PinchZoom中，有一个名为use2d的选项可以正确处理未使用Owl Carousel初始化的页面，但是一旦使用Owl Carousel或Slick初始化的页面立即失效，则此属性将失败。)

I believe it has something to do with the translate and scale properties of the plugin.(我相信这与插件的translate和scale属性有关。) Maybe some conflicting changes lead to this but why only on iOS devices?(也许一些矛盾的变化导致了这一点，但是为什么只在iOS设备上呢？)

Any help?(有什么帮助吗？)

  ask by Rahul Sharma translate from so

Answer 1

Make sure you are checking in ios devices on browser which you used for desktop and android, it looks like a css compatibility(browser support) issue.(确保您正在桌面和Android上使用的浏览器中签入ios设备，这看起来像css兼容性（浏览器支持）问题。)

If it is working fine in chrome then install chrome in all required devices and give a try.(如果它在chrome中工作正常，请在所有必需的设备中安装chrome并尝试一下。)

Note:- PinchZoom is written on Vanilla JS and owl carousel is on jquery so chances of JS conflict is very less as it's also working on desktop.(注意：-PinchZoom是用Vanilla JS编写的，而owl carousel是用jquery编写的，因此JS冲突的可能性很小，因为它也可以在桌面上使用。)

Check browser support(检查浏览器支持)

https://caniuse.com/#search=scale(https://caniuse.com/#search=scale)

https://caniuse.com/#search=translate(https://caniuse.com/#search=translate)

// Below code will only work on chrome.  
  yourdiv {
   transform: translate(50px, 100px);
   transform: scale(2, 3);
  }

You link is not reachable - http://epaperbeta2.eenadu.net/Home/Index(您的链接无法访问-http: //epaperbeta2.eenadu.net/Home/Index)