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

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:

El pulgar se gira alrededor 0.2rad a lo largo de 500 ms. 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 (los más recientes encarnaciones de Firefox, Chrome, Safari, Opera, e incluso IE)
2. He probado el siguiente dispositivos y navegadores:
   1. iPhone 3GS: Safari, Opera Mini
   2. iPhone 4S: Safari
   3. iPad (primera generación): Safari
   4. Android Galaxy S (con pan de jengibre): navegador por defecto, Firefox móvil
   5. Motorola Droid X (con pan de jengibre): navegador por defecto, Firefox móvil
3. yo no tengo encontrado un navegador de escritorio (con soporte para <canvas>) que exhibe el comportamiento
4. no he encontrado un dispositivo móvil que no lo hace exhiben el comportamiento
5. la imagen publicado es un zoom en la pantalla del 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. Hay segundo <canvas> en la página también. 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, se me ocurre, 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 de advertencia roja en un sitio de tutorial de HTML5 en algún lugar que advierte sobre dicho comportamiento?

== == 1 EDITAR

por comentario de @ GGG, eliminé el olfateo UA (que está diseñado para reducir el número y la frecuencia de tela vuelve a dibujar ya que los navegadores móviles en todo traqueteo si utilizan el mismo ajustes como para el escritorio) pero eso solo hizo que los senderos se volvieran más pronunciados (por ejemplo, más gruesos). Luego experimenté volviendo a poner el olfateador UA, pero en lugar de disminuir los bucles en un 50%, en realidad 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.

== == 2 EDITAR

Por otra comentario de @ GGG, fui a editar la imagen para añadir 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 Photoshop," no "del HTML5 <canvas>"). Cuando agregué un relleno igual de datos transparentes a los lados superior e izquierdo, el problema de rayas desapareció. Aquí fue el PSD original (pre me-adición extra-espacio):

Así que mi pregunta entonces es: incluso si los rellenos de imagen (con píxeles no transparentes) la totalidad de sus [Photoshop] lienzo, ¿por qué no se está comportando mi contexto de lienzo 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 Cairo se usa muy comúnmente por varios motores de renderizado grandes (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.

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

He notado que los navegadores móviles parecen caer 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 amerita un informe de error. Me gustaría escuchar una explicación real de lo que está sucediendo si nada más.