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 图像滑块的页面上，PinchZoom.js 在 Android 和桌面设备上运行良好，但只要我使用 iOS 设备（iPad 或 iPhone），缩放时图像就会模糊在那个页面上。其他页面可以在没有定义 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̶:̶

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

在 iPhone 或 iPad 上，单击底部的广告容器将其隐藏，然后选择日期为 1st Nov 2019。现在，当您双击放大第一页时，您会看到它在缩放时变得模糊。现在，当您转到下一页并进行缩放时，您会注意到图像没有模糊并正确显示。

不仅双击缩放，iOS 设备上的双指缩放也不适用于使用 Owl Carousel 初始化的页面。

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

任何帮助将不胜感激。

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

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

有什么帮助吗？

Answer 1

因此，经过大量研究、成功和试用后，我无法让两个插件在同一页面上协同工作，因为 translate3d 属性被插件覆盖。

我发现的解决方法是在jQuery 中使用slider 插件，该插件不使用translate3d 选项来滑动图像。幸运的是，我找到了这样一个使用 translateX 属性的插件，并将其合并到我的页面中，现在就 PinchZoom 功能而言一切正常。问题中当前的url 现在已更新为使用新的滑块插件，如果您在放大iOS 设备时会看到，则不再像以前那样看到模糊的图像。

我不会将此标记为正确答案，因为这只是一种解决方法，而不是我所询问的初始问题的实际解决方案。如果有人仍然对问题发生的原因有任何想法，我想知道。

谢谢

Answer 2

确保您在用于桌面和 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