Android drag image duplicates

[tevasaolvidar]

On Android when dragging an image the image duplicates.
I tried every possible solution but doesn't work.

Screenshot here:
http://d.pr/i/aieA

[atomictag]

Probably related to #469

[ericdrowell]

will look at this as soon as I get another Android device :)

[bernardofd]

I can vouch for this issue as well. I have a non-interactive application over KineticJS and all my tweens in a scene duplicate objects with a little offset in the Y axis (even if the tween is over the X axis). I'm attaching a screenshot taken on a Samsung Galaxy Tab 2 7.0 running Jelly Bean (4.1.1) on the Android Browser.

[sebastianovide]

this is what I see in my device... after dragging a rectangle

[scheng2013]

Hi everyone,

Was this resolved? Now I am also in this hole. Does anyone have a proper solution to fix it?

[ghost]

Hey folks,

I worked around this by first adding a "shim" layer with a big white rectangle (my background is white). My canvas size is 800x600, so you should adjust for your canvas size. Next, I added a separate layer for my draggable items.

Hope this helps some poor soul. I wrestled with it for quite a while.

  var layerShim = new Kinetic.Layer({
        id: 'layerShim',
        name: 'layerShimName',
        clearBeforeDraw: false
  });      

  var layerDraggableStuff = new Kinetic.Layer({
        id: 'layerDraggableStuff',
        name: 'layerDraggableStuff',
        clearBeforeDraw: true
  });      

  var rect = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: 800,
    height: 600,
    fill: 'white',
    stroke: 'white',
    strokeWidth: 4
  });
  layerShim.add(rect);
  layerShim.draw();

  // Add shim layer
  stage.add(layerShim);

  // Add nodes to draggables layer here... 

  // Add draggables layer
  stage.add(layerDraggables);

[ericdrowell]

I was able to replicate this - I'm shocked that more people weren't complaining about this. Looking into it.

[ericdrowell]

Which version of android? This appears to be an Android bug. Stuff drawn on the canvas element isn't able to be cleared after the first draw:

http://www.html5gamedevs.com/topic/114-canvasclearrect-bug-in-android-stock-browser/

[ericdrowell]

okay, the work around here (for Android 4.1.1 and 4.1.2) is to not immediately draw onto the canvas. set a small timeout (50ms works for me) before adding layers to the stage. I believe that this is no longer an issue with recent versions of Android.

[ghost]

I'm running Android 4.3, so it looks like the Android bug is still lingering. Thanks for the workaround, @ericdrowell. Much cleaner than my elaborate hack.

[dbelay22]

Hi people,
I had the same issue dragging a group with an image and a couple of shapes inside. The timeout workaround didn't work for me and I only was able to solve it moving the draggable layer to the top on the contentTouchMove event:

this.stage.on('contentTouchmove', function(evt) { selectedGroup.getLayer().moveToTop(); }

I'll keep searching for a better solution as this may kill performance.

Hope this helps.