Почему я вижу полосы с поворотом в мобильных браузерах?

Я выполняю поворот 2D-холста, который довольно хорошо работает на настольном компьютере, но есть одна небольшая проблема в мобильном пространстве. Вот увеличенный снимок экрана:

Изображение большого пальца поворачивается примерно на 0,2 рад в течение 500 мс. Я думаю, что весь соответствующий код встроен ниже. Как видите, в каждом из верхних углов изображения есть своего рода «след».

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

Примечания:

1. Код очень хорошо работает на десктопе (последние версии Firefox, Chrome, Safari, Opera и даже IE)
2. Я тестировал следующие устройства и браузеры:
   1. iPhone 3GS: Safari, Opera Mini
   2. iPhone 4S: Safari
   3. iPad (1-го поколения): Safari
   4. Android Galaxy S (с имбирным пряником): браузер по умолчанию, мобильный Firefox
   5. Motorola Droid X ( с имбирным пряником): браузер по умолчанию, Firefox для мобильных устройств
3. Я не нашел настольного браузера (поддерживающего ), который демонстрирует поведение
4. Я не нашел мобильное устройство, которое недемонстрирует поведение
5. Опубликованное изображение представляет собой увеличенный снимок экрана с iPad
6. Если это имеет значение, (при вращении) анимируется ( через jQuery), чтобы пройти через изображение позади него и остановиться, что видно на скриншоте.
7. На странице также есть второй . Он использует тот же .png с изображением большого пальца вверх и вращается с использованием того же кода, опубликованного выше, а также анимируется для перемещения по другому фоновому изображению (но в противоположном направлении, т. Е. Один «большой палец вверх» перемещается на северо-запад, а другой — на юго-восток. ), и следы также появляются там, в том же месте относительно контекста холста.

Я облил эту стену всей грязью, которую только мог вообразить, в надежде, что что-то может привести к диагнозу.Кто-нибудь еще видел что-нибудь подобное раньше? Что я мог бы попробовать по-другому? Я пропустил какую-то большую красную предупреждающую метку на учебном сайте HTML5, которая предупреждает о таком поведении?

==EDIT 1==

Согласно комментарию @GGG, я удалил снифф UA (который предназначен для уменьшения количества и частоты перерисовок холста, потому что все мобильные браузеры пыхтят, если я использую те же настройки, что и для настольных компьютеров). ), но это просто привело к тому, что следы стали более выраженными (например, толще). Затем я поэкспериментировал, вернув UA sniff обратно, но вместо того, чтобы уменьшить количество циклов на 50%, я фактически увеличилих на 500%. Опять же, это привело к тому, что следы стали еще более выраженными. Однако кажется, что это утолщение является асимптотическим — другими словами, есть предел тому, насколько толстыми я могу сделать следы, настраивая параметры скорости анимации.

==EDIT 2==

Согласно комментарию other@GGG, я решил отредактировать изображение, чтобы добавить некоторые прозрачные данные в попытке найти подходящее решение. Что я увидел, так это то, что изображение выступало против верхнего и левого краев холста (это «холст Photoshop », а не «HTML5 »). Когда я добавил равное заполнение прозрачных данных сверху и слева, проблема с полосами исчезла.Вот исходный PSD (до добавления дополнительного интервала):

Итак, мой вопрос звучит так: даже если изображение заполняет (непрозрачными пикселями) весь холст [Photoshop], почему это не так? мой контекст холста clearRect()ведет себя сам по себе? Разве это не стирает ничего в пределах холста? Если да, то почему он оставляет эти несколько пикселей?

==EDIT 3==

После некоторых исследований выяснилось, что Cairoдовольно часто используется несколькими основными движками рендеринга (по крайней мере, WebKit и Gecko). Может ли быть так, как впервые предположил @JonasWielicki, что библиотека Cairo, оптимизированная для мобильного исполнения, возможно, немного переусердствовала?