[BUG] Touch dragging fails with Shadow DOM - "Cannot use 'in' operator" error #1066
Description
Description
When using createDraggable with elements inside Shadow DOM, touch events cause a runtime error: Cannot use 'in' operator to search for 'overflow-y' in undefined. This issue only occurs with touch events, not mouse events.
Steps to Reproduce
- Create an element inside a Shadow DOM
- Apply
createDraggableto that element - Attempt to drag using touch events (mobile or touch simulation)
- Error occurs:
Cannot use 'in' operator to search for 'overflow-y' in undefined
Expected Behavior
Touch dragging should work seamlessly with elements inside Shadow DOM, just as it does with regular DOM elements.
Actual Behavior
The draggable crashes with an error when attempting to traverse the DOM tree and encounters a Shadow DOM boundary.
Root Cause
In src/draggable.js at line 931-943, the handleMove method traverses up the DOM tree using parentNode. When it reaches a Shadow DOM boundary, parentNode returns a DocumentFragment (the shadow root) which doesn't have element properties like overflow-y, causing the error.
Minimal Reproduction Code
// Create element with Shadow DOM
const host = document.createElement('div');
document.body.appendChild(host);
const shadowRoot = host.attachShadow({ mode: 'open' });
// Add draggable element inside Shadow DOM
const target = document.createElement('div');
target.style.cssText = 'width: 100px; height: 100px; background: blue;';
shadowRoot.appendChild(target);
// This will fail on touch drag
const draggable = createDraggable(target, {
onUpdate: ({ x, y }) => console.log('Dragged to:', x, y)
});
// Simulate touch event (or use actual touch on mobile)
target.dispatchEvent(new TouchEvent('touchstart', {
touches: [new Touch({ identifier: 1, target, clientX: 50, clientY: 50 })],
bubbles: true
}));Environment
- anime.js version: 4.1.3
- Browser: All modern browsers with Shadow DOM support
- Device: Any device with touch support
Proposed Solution
Check node type before accessing element properties and stop traversal at Shadow DOM boundaries (see PR for implementation).