Floating clone does not show in chrome if dragged element contains a chartjs component

Question

Codesand box link

https://codesandbox.io/s/vue-template-qoo66

Step by step scenario

I am building a dashboard where each draggable tile of a grid contains a graph. The graphs are drawn using chart.js. Although I am able to change the order of the tiles by dragging and dropping, the floating reference tile of the tile being dragged does not show up if the tile contains a chart.js graph. This only occurs in Chrome Browser. For Firefox and Edge browsers it works fine.

Actual Solution

The only found solution is to hide the chart before dragging.

Expected Solution

It would be amazing if I can avoid hiding the charts while dragging the tiles.

The results for firefox and chrome are shown below. The flashing glitches is some bug from the screen recording tool, disregard that.

Result in Firefox67 (Arch Linux)

Result in Chrome74 (Arch Linux) Incognito window without any extension

Visual results for different browsers from example available at CodeSandbox.

Both results were achieved using Chrome74 and Firefox67 running on Arch Linux. I had the same results for Chrome in Windows, but can't confirm the version now.

I also tried Chrome75 for MacOS. The floating tile was shown, however it was dislocated outside of the page frame when charts were enabled.

Answer 1

I would like to thank @OwenM for his time and help. After some back and forth conversation with him at the Vue.Draggable repository page Issue 664 he pointed the way to right solution and solved some final issues we ended up facing.

I am publishing the link to a CodeSandbox that contains the final solution. Although there is some room for some package fixes, the solution solves my current problem and I can move on.

Thanks once again @OwenM, really appreciate it. Cheers