bug : Drag offset error when CSS `zoom` is applied to container

[3aluw]

📍 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.8 on the container.
• The issue is similar to [bug / feature req] Drag offset error when inside transform: scale() #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.