usando touchstart hace que la pantalla se vuelva borrosa en touchstart

Question

Actualmente estoy probando la funcionalidad TouchStart en mi dispositivo (Samsung galaxy S2) para mi juego. Estoy programando usando javascript y jQuery envueltos bajo PhoneGap en Android y en la actualidad teniendo problemas de la siguiente manera:

• mi tacto del evento de inicio (por ejemplo, provocar un botón de ataque "touchstart" de eventos para ejecutar algunos javascript para realizar la acción de ataque) causas mi pantalla se vuelve borrosa temporalmente, luego vuelve a la normalidad en menos de un segundo, por lo que se parece más a un parpadeo de la pantalla donde las imágenes se ponen nerviosas). No estoy usando transformaciones css o transiciones simplemente css e imágenes.

¿Puede alguien decirme por favor si han encontrado moreorless problemas similares a los míos. Un poco perdido, ya sea un problema de hardware o de inicio táctil donde puedo resolver ese problema.

Muestra Javascript abajo para mis controles de navegación (izquierda, arriba, abajo, derecha touchstart tap):

if ('ontouchstart' in document.documentElement) { 
     var left = document.getElementById('left'); 
     left.addEventListener("touchstart", function(e){ 
      if(controlsPlayerChar == '') 
      { 
       return false; 
      } 

      var l_oldCell = $('#' + controlsPlayerChar).parent().attr('id'); 
      var l_xy = l_oldCell.split('_'); 
      var l_x = l_xy[0]; 
      var l_y = l_xy[1]; 

      if(l_y == 1) 
      { 
       direction = "left"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      var l_newCell = l_x + '_' + (parseInt(l_y) - 1); 

      // validate if next cell is empty 
      if($('#' + l_newCell + ':has(".shadow")').val() != undefined 
      || $('#' + l_newCell + ':has(".ally")').val() != undefined 
      || $('#' + l_newCell + ':has(".obstacle")').val() != undefined) 
      { 
       direction = "left"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      $('#' + l_newCell).append($('#' + controlsPlayerChar)); 
      $('#' + l_oldCell + ' ' + '#' + controlsPlayerChar).remove(); 

      // set char direction to 'left' and set next footstep 
      setDirection('left'); 
      setFootstep(footstep); 
      setCharDynamics(controlsPlayerChar); 
     }); 

     var up = document.getElementById('up'); 
     up.addEventListener("touchstart", function(e){ 
      if(controlsPlayerChar == '') 
      { 
       return false; 
      } 

      var u_oldCell = $('#' + controlsPlayerChar).parent().attr('id'); 
      var u_xy = u_oldCell.split('_'); 
      var u_x = u_xy[0]; 
      var u_y = u_xy[1]; 

      if(u_x == 1) 
      { 
       direction = "up"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      var u_newCell = (parseInt(u_x) - 1) + '_' + u_y; 

      // validate if next cell is empty 
      if($('#' + u_newCell + ':has(".shadow")').val() != undefined 
      || $('#' + u_newCell + ':has(".ally")').val() != undefined 
      || $('#' + u_newCell + ':has(".obstacle")').val() != undefined) 
      { 
       direction = "up"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      $('#' + u_newCell).append($('#' + controlsPlayerChar)); 
      $('#' + u_oldCell + ' ' + '#' + controlsPlayerChar).remove(); 

      // set char direction to 'up' and set next footstep 
      setDirection('up'); 
      setFootstep(footstep); 
      setCharDynamics(controlsPlayerChar); 
     }); 

     var down = document.getElementById('down'); 
     down.addEventListener("touchstart", function(e){ 
      if(controlsPlayerChar == '') 
      { 
       return false; 
      } 

      var d_oldCell = $('#' + controlsPlayerChar).parent().attr('id'); 
      var d_xy = d_oldCell.split('_'); 
      var d_x = d_xy[0]; 
      var d_y = d_xy[1]; 

      if(d_x == rows) 
      { 
       direction = "down"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      var d_newCell = (parseInt(d_x) + 1) + '_' + d_y; 
      // validate if next cell is empty 
      if($('#' + d_newCell + ':has(".shadow")').val() != undefined 
      || $('#' + d_newCell + ':has(".ally")').val() != undefined 
      || $('#' + d_newCell + ':has(".obstacle")').val() != undefined) 
      { 
       direction = "down"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      $('#' + d_newCell).append($('#' + controlsPlayerChar)); 
      $('#' + d_oldCell + ' ' + '#' + controlsPlayerChar).remove(); 

      // set char direction to 'down' and set next footstep 
      setDirection('down'); 
      setFootstep(footstep); 
      setCharDynamics(controlsPlayerChar); 
     }); 

     var right = document.getElementById('right'); 
     right.addEventListener("touchstart", function(e){ 
      if(controlsPlayerChar == '') 
      { 
       return false; 
      } 

      var r_oldCell = $('#' + controlsPlayerChar).parent().attr('id'); 
      var r_xy = r_oldCell.split('_'); 
      var r_x = r_xy[0]; 
      var r_y = r_xy[1]; 
      if(r_y == cols) 
      { 
       direction = "right"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      var r_newCell = r_x + '_' + (parseInt(r_y) + 1); 

      // validate if next cell is empty 
      if($('#' + r_newCell + ':has(".shadow")').val() != undefined 
      || $('#' + r_newCell + ':has(".ally")').val() != undefined 
      || $('#' + r_newCell + ':has(".obstacle")').val() != undefined) 
      { 
       direction = "right"; 
       setCharDynamics(controlsPlayerChar); 
       return false; 
      } 

      $('#' + r_newCell).append($('#' + controlsPlayerChar)); 
      $('#' + r_oldCell + ' ' + '#' + controlsPlayerChar).remove(); 

      // set char direction to 'right' and set next footstep 
      setDirection('right'); 
      setFootstep(footstep); 
      setCharDynamics(controlsPlayerChar); 
     }); 
} 

Por favor, hágamelo saber si usted piensa algo anda mal con respecto a la secuencia de comandos anterior. La forma en que agrego el evento de inicio táctil es el mismo en otras áreas de mi secuencia de comandos cuando, por ejemplo, para iniciar un ataque o iniciar un menú de opciones, por ejemplo.

Answer 1

Parece que esto es toque resaltando.

Puede intentar desactivar este efecto aplicando la propiedad CSS -webkit-tap-highlight-color en sus controles o deshabilitar esto en todos los elementos usando el selector *.

Por ejemplo:

.someelement { 
    -webkit-tap-highlight-color: transparent; 
} 

Answer 2

Hemos encontramos con este problema cuando se utiliza transformaciones translate3d.

Hemos fijado mediante el establecimiento de

* { -webkit-transform: translate3d(0,0,0,); } 

de manera que cada elemento es inicializado por el espacio 3d

Answer 3

En primer lugar, asegúrese de que está llamando a preventDefault() en el evento. Me di cuenta de que si también estás apuntando a los eventos del mouse, pueden disparar al tocar. De lo contrario, utilizo un método ligeramente diferente para deshabilitar el resaltado táctil. Pruebe:

-webkit-tap-highlight-color: rgba(0,0,0,0); 

En el CSS de su botón.