Bug: Safari native drag preview on elements with image

[nikischin]

I experience a bug, in Safari, where when I drag an element with an image, the native drag preview is not working as expected.

I have an implementation like this: (simplified version - only the last lines are really relevant to understand the issue)

export function useDraggable ({ onDragEnd }) {
    const ref = useRef<HTMLDivElement | null>(null);
    const [ dragging, setDragging ] = useState<boolean>(false);

    useEffect(()=> {
        const el = ref.current;

        if (!el) {
            return;
        }

        return combine(
            draggable({
                element: el,
                onDragStart: ()=> setDragging(true),
                onDrop: ()=> setDragging(false),
            }),
            dropTargetForElements({
                element: el,
                getIsSticky: ()=> true,
                onDrop: (args)=> {
                    onDragEnd(args);
                },
            })
        );
    }, [ onDragEnd ]);

    return {
        ref,
        dragging
    };
}

function DraggableItem({children, className, onDragEnd}){
    const { ref, dragging } = useDraggable({onDragEnd});

    return (
        <div ref={ref} style={{ opacity: dragging ? 0.5 : 1, cursor: 'grab' }} className={className}>
            {children}
        </div>
    );
}

function App(){
    const [ somestate, setSomeState ] = useState<bool>(false)

    return (
        <DraggableItem className='my-classname' onDragEnd={console.log}>
            <img src='somesource.jpg' onClick={()=> setSomeState(true)} draggable="false" />
        </DraggableItem>
    );
}

As pointed out in the documentation I need to set draggable="false" on the image in order for the functionality to work. However, with this change in Safari, the snapshot of the drag preview is simply empty and does not include the image. It does though render the element wrapping the image as a drag preview but without including the image.

Did someone experience this before and might have a workaround for it. It seems to work fine on Chrome and Firefox. Thank you!

[alexreardon]

Thanks for raising this! Could you please port your example to https://codesandbox.io/ (or similar) so I can have a play?

[nikischin]

Hi @alexreardon, sure and thank you for your time!

https://codesandbox.io/p/sandbox/wizardly-rgb-jpw5kg?file=%2Fsrc%2Findex.tsx

It's a minimal example without styling or anything involved. I kept it simple in order to not introduce other problems which might have some other reason. I personally use the example within a flexbox, though the issue already happens without one.

Please try with Safari on Mac. Chrome works perfect and also Firefox quite fine (preview is smaller but still visible)

Also one thing to mention (not sure if you also have it in the docs) is that I would really recommend putting -webkit-touch-callout: none; on the image, which I haven't done in the example but is beneficial whenever you also have iOS users.

Hope this helps!

[nikischin]

Seems like a workaround would be wrapping the <img> within another element like this

<DraggableItem className='my-classname' onDragEnd={console.log}>
    <div>
        <img src='somesource.jpg' onClick={()=> setSomeState(true)} draggable={false} />
    </div>
</DraggableItem>

You could even use an <a draggable={false}> instead of the <div>. Need to verify, this does not mess up my layout, but might help to investigate the issue or for anyone coming up with a similar issue.

Update: This workaround, however, removes the image from the drag preview in Firefox on the first drag after page load.