html5 - sirve - ¿Por qué veo rayas con la rotación de<canvas> en los navegadores móviles?

que es html5 y sus caracteristicas

Question

Estoy realizando una rotación de un lienzo en 2D que funciona bastante bien en el escritorio, pero hay un pequeño problema en el espacio móvil. Aquí hay una captura de pantalla ampliada:

La imagen del pulgar se gira alrededor de 0.2rad en el transcurso de 500ms. Lo que creo que es todo el código relevante está en línea a continuación. Como puede ver, hay una especie de "rastro" dejado por cada una de las esquinas superiores de la imagen.

var duration = 500;
var start = 0;
var stop = 0.287554326;
var step = (stop - start) / 10;
var steps = (stop - start) / step;
var current = 0;
var delay = duration / steps;
var first = true;
if (navigator.userAgent.match(/iP(hone|[ao]d)|android/i)) step *= 1.5;
var rotate_int = setInterval(function() {
  if (current >= stop) {
    clearInterval(rotate_int);
    callback && callback();
    return;
  }
  ctx.clearRect(0, 0, cvs.width, cvs.height);
  ctx.translate(cvs.width / 2, cvs.height / 2);
  ctx.rotate(step);
  current += step;
  ctx.translate(cvs.width / -2, cvs.height / -2);
  ctx.drawImage(i, 0, 0);
  if (first) {
    first = false;
    thumb.hide();
  }
}, delay);

Notas:

1. El código funciona muy bien en el escritorio (las encarnaciones más recientes de Firefox, Chrome, Safari, Opera e incluso IE)
2. Probé los siguientes dispositivos y navegadores:
   1. iPhone 3GS: Safari, Opera Mini
   2. iPhone 4S: Safari
   3. iPad (1ª generación): Safari
   4. Android Galaxy S (con gingerbread): navegador predeterminado, Firefox mobile
   5. Motorola Droid X (con gingerbread): navegador predeterminado, Firefox mobile
3. No he encontrado un navegador de escritorio (compatible con <canvas> ) que muestre el comportamiento
4. No he encontrado un dispositivo móvil que no muestre el comportamiento
5. La imagen publicada es una captura de pantalla ampliada desde el iPad
6. Si es importante, el <canvas> (mientras gira) se está animando (a través de jQuery) para transitar por la imagen detrás de él y detenerse, lo que se puede ver en la captura de pantalla.
7. También hay un segundo <canvas> en la página. Utiliza el mismo pulgar hacia arriba .png, y gira utilizando el mismo código publicado anteriormente, y también está animado para transitar a través de una imagen de fondo diferente (pero en la dirección opuesta, es decir, un "pulgar hacia arriba" se mueve al noroeste y un sureste ), y los caminos también aparecen allí, en la misma ubicación relativa al contexto del lienzo.

He echado todo el barro en esta pared en la que puedo pensar, con la esperanza de que algo pueda conducir a un diagnóstico. ¿Alguien más ha visto algo así antes? ¿Qué podría probar de manera diferente? ¿Me he olvidado de una gran etiqueta roja de advertencia en un sitio de tutorial de HTML5 en algún lugar que advierte sobre dicho comportamiento?

== EDITAR 1 ==

Por el comentario de @GGG, eliminé el sniff de UA (que está diseñado para disminuir el número y la frecuencia de los rediseños de canvas porque todos los navegadores móviles funcionan si uso la misma configuración que para el escritorio) pero eso solo hizo que los senderos se volvieran más pronunciados ( por ejemplo, más grueso). Luego experimenté volviendo a poner el olfateador UA, pero en vez de disminuir los bucles en un 50%, en realidad los aumenté en un 500%. De nuevo, esto hizo que los senderos se volvieran aún más pronunciados. Parece, sin embargo, que este engrosamiento es asintótico, en otras palabras, hay un límite en cuanto al grosor que puedo causar a los rastros modificando los parámetros de la velocidad de la animación.

== EDITAR 2 ==

El otro comentario de Per @ GGG fue ir a editar la imagen para agregar algunos datos transparentes en un intento de encontrar una solución adecuada. Lo que vi fue que la imagen sobresalía de los bordes superior e izquierdo del lienzo (eso es "del lienzo de Photoshop ", no "del <canvas> HTML5"). Cuando agregué un relleno igual de datos transparentes a los lados superior e izquierdo, el problema de rayas desapareció. Aquí estaba el PSD original (pre me-adding-extra-spacing):

Entonces, mi pregunta es: incluso si la imagen llena (con píxeles no transparentes) la totalidad de su lienzo [Photoshop], ¿por qué no se está comportando el contexto canvas clearRect() ? ¿Debería eso no borrar nada dentro de los límites del lienzo? Si es así, ¿por qué está dejando estos pocos píxeles?

== EDITAR 3 ==

Después de algunas investigaciones, resulta que El Cairo es comúnmente utilizado por varios motores de renderizado importantes (al menos WebKit y Gecko). ¿Podría ser el caso, como sugirió @JonasWielicki por primera vez, que la biblioteca de El Cairo, cuando está optimizada para la ejecución móvil, es quizás un poco exagerada?

Answer 1

Por comentarios, intente agregar algunos píxeles transparentes alrededor del borde de la imagen como una solución.

Realmente no tengo idea de por qué sucede esto. Creo que tiene algo que ver con el manejo extraño de los canales alfa en los dispositivos móviles, pero esto no es más que una suposición.

Me di cuenta de que los navegadores móviles parecen bajar o "estimar" el canal alfa mientras se desplaza (desplazarse lentamente hacia arriba y hacia abajo, incluso las fuentes se ven más "crujientes"). Me pregunto si renderizarán las cosas en dos etapas, dejando el canal alfa para la segunda etapa y omitiendo la segunda etapa si hay otro "cuadro" para renderizar inmediatamente después del "cuadro" actual, si eso tiene algún sentido. Tal vez eso de alguna manera confunde al creador al pensar que no ha dibujado las cosas en los lugares donde tiene.

De todos modos, esto probablemente justifica un informe de error. Me gustaría escuchar una explicación real de lo que está sucediendo si nada más.