Jquery droppable area wrong if zoomed

Question

Here is the fiddle with comment: http://jsfiddle.net/7xw1m1qd/1/

Html for example:

<div class="droppable"></div>
<div class="drag"></div>

JS for example:

$('.drag').draggable({});

$('.droppable').droppable({
    out: function() {
      $('.drag').css('background-color', 'red');
    },

    drop: function() {
      $('.drag').css('background-color', 'green');
    },
});

CSS for example:

.droppable {
    width: 200px;
    height: 200px;
    transform: scale(2);    
    -webkit-transform: scale(2);    
    -ms-transform: scale(2); 
    background-color: #C3C3C3;
}

.drag {
    background-color: black;
    width: 20px;
    height: 20px;
    z-index: 10;
    position: absolute;
    top: 10px;
    left: 350px;    
}

The problem is: If droppable is zoomed (by transform: scale), it still uses original dimensions for droppable, so i can drop element only in original bounds of droppable.

I found some similiar questions, but not found working solution.

Answer 1

Thats a known jQueryUI-Bug since many years (See this or this). AFAIK there is still no way to fix this.

Maybe these changes in the jQueryUI-Code itself may help you.