touch events on canvas not always properly firing on ipad / iOS10

Question

I have expierenced strange touch behaviour with a web app on my ipad air with iOS 10, where sometimes events on objects draws on canvas are not firing.

To narrow down the problem, I have created a simple test case, where I draw 25 rectancles on a canvas, each having an event handler attached. Now when I tap on the rectancles, some won't fire the event, so the code in the event handler is never executed. There are always at least 1 or 2 rectangles that don't behave normally (mostly more), and which ones are affected changes with each reload.

The handler on the underlying div always fires a touch event.

When I had a more complex setup, sometimes the event would be registered on an underlying layer. But again, only for a few of the rectangles.

I'm using Konva.js as a library (before was using kineticjs, same behaviour).

This is my code :

TheStage = new Konva.Stage({
  container: "stageContainer",
  width:  800,
  height: 350,
  scaleX:  1,
  scaleY:  1,
});
TestLayer = new Konva.Layer();
TheStage.add( TestLayer );

var Size = 70;
var i = 0;    
for (y = 0; y < 5; y ++) 
{
    for (x = 0; x < 5; x++) 
    {
        {
           var rec = new Konva.Rect
           ({ 
                x:      Size*x , 
                y:      Size*y,  
                width:  Size,
                height: Size,
                fill:   'red',
                opacity: 0.04*i,
                          stroke: 'white',
                id:     x+','+y
           });
           rec.on( 'mouseup touchend', function(evt){ 
              $('#cons').append('rectangle clicked: '+evt.target.id()+'<br />') ;
           });
           TestLayer.add( rec );
           i++;
        }
    }
}
TheStage.draw();

producing this simple example:

The rectancle top left is 0,0, bottom right is 5,5. On touch each rectangle should log it's identifier, but some just don't want to fire the touchend event (and they keep not firing until I reload the page, then other rectangles are randomly selected for malfunction...).

I have a codepen here : http://codepen.io/destiny84/pen/PWYbeO

Now is this a known bug on AppleWebKit since iOS 10? Or am I missing something here?

Answer 1

There is a bug (or very strange behavior) in new ios10. And this is known bug for KonvaJS https://github.com/konvajs/konva/issues/187

As a workaround, you can try this (add this code somewhere before your code):

Konva.Util.getRandomColor = function() {
    var randColor = (Math.random() * 0xadcea0 << 0).toString(15);
    while (randColor.length < 6) {
        randColor = ZERO + randColor;
    }
    return '#' + randColor;
}