KineticJS leaving behind ghost

Question

So i recently added Kinetic.JS v4.6.0 to my app, and tested out a simple rectangle drag and drop.

Works fine on the web browser, but as soon as i use it on a mobile, it bugs out and leaves a ghost of the rectangle after dragging.

I'm basically using the same script as the demo , without the touchStart/touchEnd events, i'm also using JQuery 1.9.1 and JQueryMobile-1.3.2.

How can i get rid of this effect, i've tried clearing the layer on touchStart and drawing the stage again on touch End but the ghost stays there.

Edit My device is a Galaxy S2 running 4.2.2 and the ghosting happens, but the app works fine on the Ipad.

/index.JS

$( window ).on( "pageinit", function ( event ) {
stage = new Kinetic.Stage( {
    container: "container",
    width: 500,
    height: 500
} );

MapLayer = new Kinetic.Layer()

var Rect = new Kinetic.Rect( {
    x: 0,
    y: 0,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4,
    draggable: true
} );

MapLayer.add( Rect );
stage.add( MapLayer );

Index.HTML

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/kinetic-v4.6.0.min.js"></script>
<script src="js/index.js"></script>
<title>Mobile OneStop</title>

<div data-role="page">
    <div data-role="content">
        <div id="container">
        </div>
    </div>
</div>

( I might do a badly drawn paint image to show this off if people do not understand)

Edit http://imgur.com/a/HlNxj#0 - Ive changed a lot of the code since posting this, but the issue still remains.

Answer 1

设法阻止了重影的发生，我只是在需要绘制的对象后面放了一个巨大的白色矩形，虽然不是很优雅，但是可以完成工作。