5

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.

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.

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. The other pages work fine with PinchZoom that do not have the Owl Carousel plugin defined on them.

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

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. 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.

Does anyone have any idea as to why PinchZoom.js in not compatible with Owl Carousel on iOS devices.

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. I have even tried to change the css styles of the slider and the entire page but no luck there.

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. I believe it has something to do with the translate and scale properties of the plugin. Maybe some conflicting changes lead to this but why only on iOS devices?

Any help?

Rahul Sharma
  • 7,768
  • 2
  • 28
  • 54

2 Answers2

0

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.

If it is working fine in chrome then install chrome in all required devices and give a try.

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.

Check browser support

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);
  }

You link is not reachable - http://epaperbeta2.eenadu.net/Home/Index

Anshul Chaurasia
  • 92
  • 8
  • Thanks for looking into it. I am 100% sure that I am checking on iOS devices only. You wont see this issue when you are using the console debugger. This is happening on an ACTUAL apple device only. The link is not reachable? Can you show me what you can see when you go to the link. You might have to change your browser settings to allow all scripts. – Rahul Sharma Nov 28 '19 at 10:05
  • Which Browser of iOS device, is it Chrome or Safari ? – Anshul Chaurasia Nov 28 '19 at 10:35
  • It is not working on both the browsers on an iOS device. – Rahul Sharma Nov 28 '19 at 10:37
  • Please paste your css of translate and scale – Anshul Chaurasia Nov 28 '19 at 13:40
0

So after a lot of research and hit and trial's, I was not able to get both the plugin's working together on the same page because of the translate3d property being overridden by the plugin.

The workaround that I found was to use a slider plugin in jQuery that does not use the translate3d option to slide the images. Luckily, I found such a plugin that uses translateX property and I incorporated that in my page and now everything is working fine in regards of PinchZoom functionality. The current url in the question is now updated to use the new slider plugin and if you will see that when you zoom on iOS devices, the blurry images are no longer seen as before.

I would not mark this as the correct answer since this is ONLY a workaround and not the actual solution to the initial problem that I had asked. If anyone still has any idea on why the problem was happening, I would like to know.

Thanks

Rahul Sharma
  • 7,768
  • 2
  • 28
  • 54