Why does Chrome remove an image pattern on an SVG when using jQuery Draggable?

Question

I'm wrapping an SVG inside a draggable div. The SVG requires a shape or path with an image fill on the face. Everything renders fine and works 100% in Firefox. In Chrome, it lets you drag once and everything is fine but on subsequent drag operations the image disappears on drop. The weird thing is that the image reappears in the helper and original div on subsequent drag operations but always disappears on drop.

In IE it lets you drag once and then it freezes in place.

Here's the HTML:

<div class="svgcontainer draggable" style="width:300px; height:220px">
    <svg transform="translate(0,0)" viewBox="0 0 8000 8000">
         <defs>
            <rect id="rectangle" width="8000" height="5860" />
            <pattern id="texture" patternUnits="userSpaceOnUse" x="0" y="0" width="8000" height="8000">
                <image xlink:href="http://texturezine.com/wp-content/uploads/2009/10/Spray-Wall-Texture-01.jpg" x="0" y="0" width="16000" height="8000" transform="translate(-4000,0)" />
            </pattern>
        </defs>
        <use xlink:href="#rectangle" fill="url(#texture)" />
    </svg>
</div>

The CSS:

.svgcontainer {position:absolute;border:2px solid red;}

The Javascript:

$(".draggable").draggable({
    helper: 'clone',
    cursor: 'move',
    opacity: 0.7,
    stop: function (event, ui) {
        var top = ui.position.top;
        var left = ui.position.left;
        $(this).css('top', top);
        $(this).css('left', left);
    }
});

The fiddle: https://jsfiddle.net/osmybu81/8/

Answer 1

Do you need to use helper: clone? Because if you remove that, it seems to work fine.

https://jsfiddle.net/osmybu81/13/