Draggable element’s “ghost” includes colors from other elements (Chrome)

Today I happened upon an xkcd comic about customizing computers. Following the theme of the comic, I decided to add a custom hotkey (Ctrl+Shift+X) to take me to the associated Explain xkcd webpage using a Chrome extension I’ve been building over the past few months.

Then I decided to insert an info box reminding myself about the hotkey, which I wanted to make draggable. That revealed an annoying issue: the background behind the popup is included in the “ghost element” that Chrome uses when you’re dragging things.

This seems to be mostly due to the rounded corners – it seems that Chrome is using a full rectangle and including the colors from behind the element. However, while testing drag and drop on my custom newtab page, I saw a similar problem: a thin yellow line was included with the green draggable element’s ghost.

How can I prevent extraneous things in the background from being included in the “ghost element”?

I’ve implemented this with basic CSS and JS so far – a fixed width and height on the draggable div with the draggable property set to true.

xkcd 1806

Drag and drop

Chrome version 63.0.3239.132