Подтвердить что ты не робот

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

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

enter image description here

Изображение большого пальца поворачивается примерно на 0.2rad в течение 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);

Примечания:

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

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

== РЕДАКТИРОВАТЬ 1 ==

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

== EDIT 2 ==

В другом комментарии @GGG я пошел редактировать изображение, чтобы добавить некоторые прозрачные данные, пытаясь найти подходящее обходное решение. То, что я увидел, было то, что изображение вытолкнуло верхний и левый края холста ( "холст Photoshop", а не "HTML5 <canvas>" ). Когда я добавил равное заполнение прозрачных данных на верхнюю и левую стороны, проблема полос исчезла. Здесь был оригинальный PSD (предварительный добавочный-дополнительный-интервал):

enter image description here

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

== EDIT 3 ==

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

4b9b3361

Ответ 1

В комментариях попробуйте добавить несколько прозрачных пикселей вокруг края изображения в качестве обходного пути.

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

Я заметил, что мобильные браузеры, кажется, падают или "оценивают" альфа-канал во время прокрутки (медленно прокручиваются вверх и вниз, даже шрифты выглядят более "хрустящими" ). Интересно, делают ли они вещи в два этапа, оставляя альфа-канал для второго этапа и пропуская второй этап, если есть другой "кадр" для визуализации сразу после текущего "кадра", если это имеет смысл. Может быть, это каким-то образом смущает визуализатора, считая, что оно не нарисовало вещи в местах, где оно есть.

Во всяком случае, это, вероятно, гарантирует отчет об ошибке. Мне было бы интересно услышать реальное объяснение того, что происходит, если ничего другого.