使用缩放css属性时，Javascript滑块更改行为

Question

我们有一个用javascript和css构建的圆形滑块。我们需要滑块来支持触摸和鼠标事件。滑块正确响应mousemove / touchmove事件。当使用Chrome缩放功能放大/缩小时，它仍然可以正常工作，但当我们在其容器中添加和操作Zoom css属性时，它开始变得怪异。

工作滑块：http://jsfiddle.net/sCanr/1/

重现： 1）将（style =“zoom：0.5”）添加到容器标记中，因此它将是：

ATTRIBUTE_1   ATTRIBUTE_2 ....  ATTRIBUTE_N
   NULL            01              778,69
   NULL            01              778,71
   ...
   NULL            03               775,33

2）尝试用鼠标移动处理程序。 （touchmove事件产生类似的行为）

注意：我们必须使用Zoom css属性，因为我们将滑块插入由不同团队维护的容器中，该容器使用zoom属性。

Answer 1

您只需使用解决问题的jQuery roundSlider插件即可。也无需在应用程序中处理大量代码。

检查以下演示：

DEMO