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

问题描述

所以我一直在（再次）解决我遇到的这个问题。我已将我的问题归咎于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 设备上？

有什么帮助吗？

标签： javascriptjquerycssowl-carouselpinchzoom

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

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

问题描述

解决方案

推荐阅读