Drag and drop overflow hidden element

Vote count:

0

I am trying to use drag&drop with an element that is small, but contains a bigger element, clipped via overflow: hidden;

For some reason on chrome, drag takes a screenshot not sized on the dragged element, but sized on the set of its children.

On the following code, chrome users should see when dragging the blue ball a drop shadow around a 600px x 600px div.

.ball {
    overflow: hidden;
    border-radius: 25px;
    background-color: red;
    height: 50px;
    width: 50px;
}

.overflowing {
    background-color: blue;
    position: relative;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
}

<div class="container">
    <div class="ball" draggable="true">
        <div class="overflowing">
            eee
        </div>
    </div>
</div>

Does anyone have a workaround for this?

asked 31 secs ago

fulmicoton

5,514

Drag and drop overflow hidden element