Le curseur Javascript change de comportement lors de l'utilisation de la propriété zoom css

Question

Nous avons un curseur circulaire construit avec javascript et css. Nous avons besoin du curseur pour prendre en charge les événements tactiles et de souris. Le curseur répond correctement aux événements mousemove/touchmove. Il agit toujours comme prévu lors du zoom avant/arrière en utilisant la fonctionnalité de zoom Chrome, mais il commence à agir bizarrement lorsque nous ajoutons et manipulons la propriété Zoom css dans son conteneur.

curseur de travail: http://jsfiddle.net/sCanr/1/

Reproduire: 1) ajouter (style = "zoom: 0,5") à l'étiquette du récipient, il serait:

<div id='container' style="zoom:0.5"> 
<div id='slider'> </div> 
</div> 

2) essayez de déplacer le gestionnaire avec la souris. (événement touchmove produire un comportement similaire)

Remarque: nous devons travailler avec la propriété Zoom css, car nous insérons notre curseur dans un conteneur géré par une équipe différente, qui utilise la propriété zoom.

Answer 1

Vous pouvez simplement utiliser le plugin jQuery roundSlider, où le problème a été résolu. Aussi pas besoin de gérer beaucoup de codes dans l'application.

Vérifiez la démo ci-dessous:

DEMO