Draggable item faded and ugly

Question

I am working on some HTML5 drag-and-drop functionality. I add the draggable="true" property to my elements and it works great, up until the elements are wider than 300px.

Up to 300px wide, the "ghost" image that is shown while dragging looks good.

Above 300px wide (e.g. at 301px), the "ghost" image has a gradient fade starting from the mouse position.

<div draggable="true" style="width:300px">Item 1</div>
<div draggable="true" style="width:301px">Item 2</div>

"Item 1" above looks nice, "Item 2" above looks horrible. I made a jsFiddle to illustrate the point. (Tested in Chrome and Firefox.)

Is there any way to disable this, so I get the nice unfaded ghost image? I specifically want to drag around a div that is 400px wide.

Answer 1

In the future w3c plans to let user set all those effects by CSS4 new pseudo-selectors http://www.w3.org/TR/selectors4/#drag-pseudos but now I think it's no possibility to style it normally. Only not using html5 feature draggable and let (some) javascript do all the job.

It's strange why someone from Google decided that elements bigger than 300px need some 'ghost' effect and smaller not.