bug : Drag offset error when CSS `zoom` is applied to container
Author: 3aluwCreated Jul 31, 2025Updated Jul 31, 2025
** Production Link** codepen
** Related Issue**
#139 – Same issue occurring when using transform: scale() instead of zoom.
Description
We have a drag-and-drop container that users can zoom (e.g., zoom out to get a better overview). The zoom is applied by setting the CSS zoom property on the parent container of the drag-and-drop area.
However, once zoom is applied, the drag-and-drop behavior becomes misaligned:
- When you start dragging an item, it immediately shifts away from the cursor.
- The item's position is offset and no longer tracks the mouse correctly.
- It appears the drag-and-drop logic does not account for the zoom level applied to the container.
- the drop behavior is fine and follows the cursor
⚙️ Technical Details
- Zooming is done via
zoom: 0.8on the container. - The issue is similar to #139, which involves the same problem when using
transform: scale().
✅ Expected Behavior
Dragging should behave normally and accurately follow the pointer, even when the container is zoomed using CSS zoom.
Source: Shopify/draggable