PinchZoom.js与iOS设备上的猫头鹰旋转木马不兼容

Question

因此，我一直在为我遇到的这个问题而绞尽脑汁。我已经明确指出我的问题是猫头鹰旋转木马v2.2.1插件与PinchZoom.js v2.3.4不兼容。

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

问题是，在带有猫头鹰( Owl )图像滑块的页面上，PinchZoom.js在安卓和桌面设备上工作得很好，但我一使用iOS设备(iPad或iPhone)，该页面上的图像就会变得模糊。其他页面可以很好地处理没有定义Owl插件的PinchZoom。

T̶o̶̶‘s̶e̶e̶̶a̶̶l̶i̶v̶e̶̶w̶o̶r̶k̶i̶n̶g̶̶’s̶e e h r h t h t h_h，h_1，h_h，h_1，h_0，h_1，0，0，0，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2，2

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

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

不仅双击变焦，而且iOS设备上的捏变焦也不能在猫头鹰旋转木马初始化的页面上工作。

有没有人知道为什么PinchZoom.js与iOS设备上的猫头鹰旋转木马不兼容。

任何帮助都将不胜感激。

更新：--这仍然是一个问题。我甚至尝试使用另一个名为浮油的滑块，但问题仍然存在。我甚至试图改变滑块和整个页面的css样式，但是没有任何进展。

在PinchZoom中，有一个名为use2d的选项，它可以正确地处理未与Owl初始化的页面，但是一旦使用Owl或Slick的页面被初始化，此属性将失败。我相信这与插件的translate和scale属性有关。也许是一些冲突的改变导致了这一点，但为什么只在iOS设备上呢？

有什么帮助吗？

Answer 1

确保您在浏览器上签入用于桌面和android的ios设备，这看起来像是css兼容性(浏览器支持)问题。

如果它在铬中工作得很好，那么在所有需要的设备上安装铬并试一试。

注意: PinchZoom是在Vanilla JS上编写的，owl旋转木马是在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

Answer 2

因此，经过大量的研究和尝试，我无法让两个插件在同一个页面上一起工作，因为插件覆盖了translate3d属性。

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

我不认为这是正确的答案，因为这只是一种解决办法，而不是我提出的最初问题的实际解决办法。如果还有人知道为什么会发生这个问题，我想知道。

谢谢