Droppable: ui.intersect() should check the "visible" dimensions of droppable

Take the following code :

    <style>
        div
        {
            margin: 10px;
        }
        .droppable
        {
            background-color: red;
        }
        .draggable
        {
            background-color: green;
        }
    </style>

    <div id="divContainer" style="height: 100px; overflow: auto;">
        <div id="drop1" class="droppable" style="height: 500px">
        </div>
    </div>
    <div id="drop2" class="droppable" style="height: 50px;">
    </div>
    <div class="draggable" style="height: 50px;">
    </div>
    <script type="text/javascript">
        $('.draggable').draggable();
        $('.droppable').droppable({ drop: function (event, ui) { $(this).text('dropped'); } });
    </script>

If you drag the green div on the red div with id='drop2', the text 'dropped' is display on the div with id='drop1'. It should be displayed on the div with id='drop2'.

The problem is that the plugin acts as if the div 'drop1' is entirely visible, which is not the case.