Dlaczego widzę smugi z obrotem <canvas> w przeglądarkach mobilnych?

Question

Wykonuję rotację płótna 2d, która działa całkiem dobrze na pulpicie, ale w przestrzeni mobilnej jest jeden mały problem. Oto powiększone zdjęcie:

Kciuk obraz jest obracany o 0.2rad nad biegiem 500ms. Myślę, że cały odpowiedni kod znajduje się poniżej. Jak widać, każdy z górnych rogów obrazu pozostawia pewien rodzaj "śladu".

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

Uwagi:

1. Kod działa bardzo dobrze na pulpicie (najnowsze wcielenia Firefox, Chrome, Safari, Opera, a nawet IE)
2. Mam przetestowała następujące urządzeń i przeglądarek:
   1. iPhone 3GS: Safari, Opera Mini
   2. iPhone 4S: Safari
   3. iPad (1 gen): Safari
   4. Android Galaxy S (z pierników): domyślna przeglądarka, Firefox Mobile
   5. Motorola Droid X (z pierników): domyślna przeglądarka, Firefox Mobile
3. nie mam znaleziono w przeglądarce na komputerze (obsługuje <canvas>), który wykazuje zachowanie
4. nie znalazłem urządzenie mobilne, które nie ich zachowanie
5. Oddelegowany obraz jest powiększony w zrzucie z iPada
6. Jeśli to ma znaczenie, <canvas> (podczas obracania) jest animowany (przez jQuery), aby przejść przez obraz za nim i zatrzymał się, co widać na zrzucie ekranu.
7. Na stronie znajduje się również druga strona <canvas>. Używa tego samego kciuk-up .png, i obraca się za pomocą tego samego kodu zamieszczonego powyżej, a także jest animowany, aby przechodzić przez inny obraz tła (ale w przeciwnym kierunku, tj. Jeden "kciuk w górę" porusza się na północny zachód, a południowy wschód), a ścieżki pojawiają się również tam, w tym samym miejscu w stosunku do kontekstu płótna.

Wyrzuciłem całe błoto na tę ścianę, o czym mogę myśleć, mając nadzieję, że coś może doprowadzić do postawienia diagnozy. Czy ktoś jeszcze widział coś takiego? Co mógłbym spróbować inaczej? Czy przegapiłem jakąś dużą czerwoną etykietę ostrzegawczą na stronie samouczka HTML5 w miejscu, które ostrzega przed takim zachowaniem?

== EDIT 1 ==

Per komentarzu @ ggg, w usunąłem powąchać UA (który został zaprojektowany, aby zmniejszyć liczbę i częstotliwość płótnie Przerysowuje ponieważ telefon przeglądarek wszystko chug czy mogę używać tego samego ustawienia jak na pulpicie), ale to spowodowało, że szlaki stały się bardziej wyraźne (np. grubsze). Następnie eksperymentowałem, wprowadzając wciąganie UA z powrotem, ale zamiast zmniejszać pętle o 50%, faktycznie zwiększyłem je o przez 500%. Znowu spowodowało to, że szlaki stały się jeszcze bardziej wyraźne.Wydaje się jednak, że to pogrubienie jest asymptotyczne - innymi słowy, istnieje granica grubości, z jaką mogę powodować ślady poprzez zmianę parametrów prędkości animacji.

== EDIT 2 ==

Per @ GGG za drugiej komentarzu, poszedłem przejść edycji obrazu dodać kilka przejrzystych danych w próbie znalezienia odpowiedniego obejścia. To, co zobaczyłem, to fakt, że obraz wystaje z górnej i lewej krawędzi płótna (to jest "z płótna" "nie" z HTML5 "). Kiedy dodałem równe dopełnienie przezroczystych danych do górnej i lewej strony, problem z pasmami zniknął. Tutaj był oryginalny PSD (pre me-dodanie-extra-spacing):

Więc moje pytanie staje się wówczas: nawet jeśli wypełnia obraz (z nieprzezroczystych pikseli) całej swojej [Photoshop] płótno, dlaczego nie zachowuje się kontekst mojego płótna? Czy to nie może zniszczyć niczego w granicach płótna? Jeśli tak, dlaczego opuszcza te kilka pikseli?

== EDIT 3 ==

Po kilku badań, okazuje się, że jest całkiem Cairo powszechnie używany przez kilku głównych silników renderowania (przynajmniej WebKit i Gecko). Czy może tak być, jak sugerował JonasWielicki, że biblioteka w Kairze - jeśli jest zoptymalizowana pod kątem mobilnej realizacji - może jest trochę nadgorliwa?

Answer 1

Na komentarze spróbuj dodać kilka przezroczystych pikseli wokół krawędzi obrazu jako obejście tego problemu.

Naprawdę nie mam pojęcia, dlaczego tak się dzieje. I think ma to coś wspólnego z dziwną obsługą kanałów alfa na urządzeniach mobilnych, ale to tylko domysły.

Zauważyłem, że przeglądarki komórkowe podczas przewijania upuszczają lub "szacują" kanał alfa (powoli przewijają w górę iw dół, nawet czcionki wyglądają bardziej "chrupiąco"). Zastanawiam się, czy renderują rzeczy w dwóch etapach, pozostawiając kanał alfa na drugim etapie i pomijając drugi etap, jeśli istnieje kolejna "ramka" do renderowania natychmiast po bieżącej "ramce", jeśli to ma jakiś sens. Może to w jakiś sposób wprawia renderera w myślenie, że nie rysuje rzeczy tam, gdzie jest.

W każdym razie, prawdopodobnie gwarantuje to zgłoszenie błędu. Byłbym ciekawy prawdziwego wytłumaczenia tego, co się dzieje, jeśli nic innego.