Search code examples
csshtmldraggablerounded-corners

Rounded corners with HTML "draggable"

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 (e.g. Chromium 33), and sometimes uses white (e.g. 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?

Solution

  • 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/