события касания на холсте не всегда правильно срабатывают на ipad/iOS10

Question

У меня есть странное поведение прикосновения с помощью веб-приложения на моем ipad-воздухе с iOS 10, где иногда события на объектах рисуются на холсте, а не стреляют.

Чтобы сузить проблему, я создал простой тестовый пример, где я рисую 25 прямоугольников на холсте, каждый из которых имеет обработчик события. Теперь, когда я нажимаю на прямоугольники, некоторые не запускают событие, поэтому код в обработчике событий никогда не выполняется. Всегда есть по крайней мере 1 или 2 прямоугольника, которые не ведут себя нормально (в основном больше), и какие из них влияют на изменения при каждой перезагрузке.

Обработчик на базовом div всегда вызывает событие касания.

Когда у меня была более сложная настройка, иногда событие регистрировалось на нижнем слое. Но опять же, только для несколько из прямоугольников.

Я использую Konva.js в качестве библиотеки (до этого использовалось kineticjs, такое же поведение).

Это мой код:

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(); 

производит этот простой пример:

Верхний левый rectancle является 0,0, нижний правый 5,5. Прикосновение каждого прямоугольника должно регистрировать его идентификатор, но некоторые просто не хотят запускать событие touchhend (и они не стреляют, пока я не перезагружу страницу, а затем другие прямоугольники случайно выбраны для сбоя ...).

У меня есть codepen здесь: http://codepen.io/destiny84/pen/PWYbeO

Теперь это известная ошибка на AppleWebKit так прошивкой 10? Или я чего-то не хватает?

Answer 1

В новом ios10 есть ошибка (или очень странное поведение). И это известно ошибка для KonvaJS https://github.com/konvajs/konva/issues/187

В качестве обходного пути, вы можете попробовать это (добавить этот код где-то перед кодом):

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