Issue when combined with CSS zoom

[laurensschuitemaker]

When I set the body to zoom: 2; the plugin doesn't work right. Sample: http://jsfiddle.net/laurensschuitemaker/zd96p2m4/

The dragging function doesn't react to the mouse position.

Can you help me in the right direction of how to solve this?

Thanks.

[laurensschuitemaker]

Does anyone have any idea how to solve this?

[shuckster]

The problem seems to be with the draggable() helper not accounting for the zoom-level.

Here's a small patch that I found to work, although I'm not really sure why:

--- a/spectrum.js
+++ b/spectrum.js
@@ -1042,6 +1042,8 @@
         var maxWidth = 0;
         var hasTouch = ('ontouchstart' in window);
 
+        var zoom = parseFloat( $(document.body).css('zoom') );
+
         var duringDragEvents = {};
         duringDragEvents["selectstart"] = prevent;
         duringDragEvents["dragstart"] = prevent;
@@ -1069,8 +1071,8 @@
                 var pageX = t0 && t0.pageX || e.pageX;
                 var pageY = t0 && t0.pageY || e.pageY;
 
-                var dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth));
-                var dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight));
+                var dragX = Math.max(0, Math.min((pageX - offset.left)/zoom, maxWidth));
+                var dragY = Math.max(0, Math.min((pageY - offset.top)/zoom, maxHeight));
 
                 if (hasTouch) {
                     // Stop scrolling in iOS
@@ -1091,6 +1093,9 @@
                     maxWidth = $(element).width();
                     offset = $(element).offset();
 
+                    offset.top *= zoom;
+                    offset.left *= zoom;
+
                     $(doc).bind(duringDragEvents);
                     $(doc.body).addClass("sp-dragging");
 

[laurensschuitemaker]

Hi @shuckster,

Thanks a lot! That worked!

[shuckster]

Glad it helped. :)

[shuckster]

As you've probably found out by now, a little test after getting the zoom value is a good idea:

    var zoom = parseFloat( $(document.body).css('zoom') );

    if ( isNaN(zoom)) {
        zoom = 1;
    }