In Chrome (Chromium 45), the ghost image for a draggable element is rendered on a white background. How can I force it to render the ghost image on a transparent background, like Firefox does?
Example: http://jsfiddle.net/c8p24q6y/
I have a dark background image (indicated by black color). When you drag the list items in Chrome, the ghost image has an ugly white background. In Firefox, the ghost image will have a transparent background.
<html>
<head>
<style>
body{
background-color:black;
}
ul { list-style-type:none; }
li *{
display:inline-block;
border-radius:10px;
width:100px;
height:23px;
margin-right:8px;
cursor:move;
}
li :first-child{ background-color:red; }
li :last-child{ background-color:blue; }
</style>
<script>
window.onload = function(){
var dc = document.getElementById("drag_cont");
dc.ondragstart = function(e){
e.dataTransfer.setData("text/plain", "testing");
};
}
</script>
</head>
<body>
<ul id="drag_cont">
<li draggable="true">
<div></div><div></div>
</li>
<li draggable="true">
<div></div><div></div>
</li>
</ul>
</body>
</html>
