javascript - PinchZoom.js 与 iOS 设备上的 Owl Carousel 不兼容

Question

所以我(再次)一直在思考我遇到的这个问题。我已将我的问题定位到 Owl Carousel v2.2.1插件与 PinchZoom.js v2.3.4 不兼容。

我还使用了最新版本的 Owl Carousel v2.3.4，显然 PinchZoom.js 完全停止工作，因此我不得不使用早期版本的 Owl Carousel 来实现我需要的功能。

问题是，在具有用于图像的 Owl Carousel slider 的页面上，PinchZoom.js 在 Android 和桌面设备上运行良好，但一旦我使用 iOS 设备(iPad 或 iPhone)，缩放时图像就会模糊在那一页上。其他页面可以与 PinchZoom 正常工作，但没有定义 Owl Carousel 插件。

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̶:̶

http://epaperbeta2.eenadu.net/Home/Index

在 iPhone 或 iPad 上，点击底部的广告容器将其隐藏，然后选择日期 2019 年 11 月 1 日。现在，当您双击缩放第一页时，您会看到它变焦时变得模糊。现在，当您转到下一页并缩放时，您会发现图像没有模糊并且显示正确。

不仅是双击缩放，iOS 设备上的捏合缩放在使用 Owl Carousel 初始化的页面上也不起作用。

有谁知道为什么 PinchZoom.js 与 iOS 设备上的 Owl Carousel 不兼容。

任何帮助将不胜感激。

更新:这仍然是一个问题。我什至尝试使用另一个名为 Slick 的 slider 但问题仍然存在。我什至尝试更改 slider 和整个页面的 css 样式，但没有成功。

在 PinchZoom 中，有一个名为 use2d 的选项，它可以在未使用 Owl Carousel 初始化的页面上正常工作，但一旦使用 Owl Carousel 或 Slick 初始化的页面，此属性就会失败。我相信这与插件的 translate 和 scale 属性有关。也许一些相互冲突的变化会导致这种情况，但为什么只在 iOS 设备上呢？

有什么帮助吗？

Answer 1

确保您在用于桌面和 Android 的浏览器上检查 iOS 设备，这看起来像是 CSS 兼容性(浏览器支持)问题。

如果它在 Chrome 中工作正常，请在所有需要的设备中安装 Chrome 并尝试一下。

注意:- PinchZoom 是在 Vanilla JS 上编写的，而 owl carousel 是在 jquery 上编写的，因此 JS 冲突的可能性非常小，因为它也可以在桌面上运行。

检查浏览器支持

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

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

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

您的链接无法访问 - http://epaperbeta2.eenadu.net/Home/Index