CODEWITHSUNDEEP
javascriptandroidjquerycss
mu4ddi3
mu4ddi3

Reputation: 135

jQuery UI Touch Punch - slider on mobile devices is not accurate when the page is zoomed

I try to explain my problem and behavior.

Enter touchpunch vertical slider demo-page (http://touchpunch.furf.com/content.php?/slider/vertical-slider) on your smartphone. Zoom to the max and touch somewhere one the slider - the result is that the handler moves but not to the point you were touched but higher. The distance between touch and handler position after touch is bigger when the zoom is bigger and opposite - on default 100% view everything is ok. I notice it in my project and this is a problem becouse on mobile devices zooming site is common and then slider got crazy. Do you have any ideas guys how to resolve this?

Upvotes: 2

Views: 481

Answers (1)

Kocik
Kocik

Reputation: 504

Question is rather old, but today I stumbled upon the same problem and I decided to share the solution I've found ;)

What I've done is:

  • added position: relative on the container
  • modified touch-punch plugin, adding scroll offset to clientX and clientY coordinates of simulated mouse event.

Here is fork with updated code, also added some test cases you can check out in live browser: https://github.com/Kocik/jquery-ui-touch-punch-zoom-fork

Upvotes: 1

Related Questions