Rounded corners with HTML “draggable”

Question

I am using the "draggable" attribute and find not all browsers render the element the same way while it is being dragged. Specifically, the background color sometimes is taken from the parent element (eg Chromium 33), and sometimes uses white (eg Firefox 28).

 <div style="background-color: #79a; padding: 4px;"> <div style="border-radius: 12px; padding: 12px; background-color: #ead;" draggable='true' ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"> <p>Some content here that should have clean rounded corners while being dragged</p> </div> </div>

See above at http://jsfiddle.net/pZv35/3/ .

Is there some way (preferably using CSS) to mitigate this problem?

Answer 1

Updated fix. Pain in the ...

Hopefully, this will help someone. The solution is from the react-dnd github.

Add transform: translate(0, 0); to the node you wish to drag as a preview.

CSS in JS: transform: 'translate(0, 0)'

Solution from here .

Answer 2

This is still broken in Chrome (71). I found that this can be fixed by setting an opacity to the draggable element. If you do not desire opacity, you can set opacity: 0.999; to fix this.

Solution: https://jsfiddle.net/8ro46wf7/

Answer 3

For images, this did not work for me in present-day Chrome. I found that this answer works well for images.

Here's my code that's working today:

In css:

.content {
  background: url('') top left no-repeat;
  overflow: hidden;
  opacity: 0.999;
  border-radius: 50%;
}  

in html:

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div id="drag1" class="content" style="background:url('##POPULATED PROGRAMMATICALLY##');
   height:144px; width:144px;" draggable="true" ondragstart="drag(event)"> </div>
</div>

Answer 4

Adding position: relative; to .inner fixes this as demonstrated here: http://jsfiddle.net/pZv35/4/

Edit: I updated it to include opacity: 0.999 as per Rutger's solution below: https://jsfiddle.net/vzcbng7w/8/