Ghost image of HTML5 drag and drop DOM element gets cropped if part of element is hidden due to scrollbar

Question

So basically on mac Chrome (Version 63.0.3239.132 (Official Build) (64-bit)) when I drag a DOM element that has draggable="true" and if that element is only partly visible due to the other part being hidden due to scroll then only the part that is visible is shown as the ghost image.

This seems to work fine on Firefox but doesn't seem to work well on Chrome.

When the whole red element is visible the whole red ghost image is visible:

When part of the red element is visible only part of the red ghost image is visible:

Does anybody know a workaround for this, if there is one?

Answer 1

Seems to be a bug. Answer found in the following post:

Chrome cuts off ghost image when using position sticky/fixed

Upgrading to chrome v64 which is out solves the problem.

Answer 2

I had the same issue and I solved it by adding a z-index: 1 property to the draggable items