为什么我在移动浏览器上看到带<canvas>旋转的条纹？</canvas>

Question

我正在执行一个2d画布的旋转，它在桌面上工作得很好，但在移动领域有一个小问题。这是一个放大的屏幕截图：

拇指图像在500ms的过程中旋转约0.2rad。我认为所有相关代码都在下面内联。正如您所看到的，图像的每个顶角都留有某种“痕迹”。

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（第一代）：Safari
   4. Android Galaxy S（含姜饼）：默认浏览器，Firefox mobile
   5. 摩托罗拉Droid X（含姜饼）：默认浏览器，Firefox mobile
3. 我还没有找到展示行为的桌面浏览器（支持<canvas>）
4. 我还没有找到不展示行为的移动设备
5. 发布的图片是来自iPad的放大屏幕截图
6. 如果重要的话，<canvas>（在旋转时）正在动画（通过jQuery）在其后面的图像中传输并停止，这在屏幕截图中可见。
7. 页面上还有第二个<canvas>。它使用相同的thumbs-up .png，并使用上面发布的相同代码进行旋转，并且还可以在不同的背景图像上进行动画处理（但是在相反的方向上，即一个“竖起”向西北方向移动，一个向东南方向移动，并且路径也出现在那里，在相对于画布上下文的相同位置。

我已经把所有的泥浆扔在了我能想到的这堵墙上，希望有些东西可以导致诊断。以前有没有人见过这样的东西？我可以尝试不同的方式吗？我是否在HTML5教程网站上错过了一些警告这种行为的大红色警告标签？

==编辑1 ==

Per @ GGG的评论，我删除了UA嗅探（旨在减少画布重绘的数量和频率，因为如果我使用与桌面相同的设置，移动浏览器都会突然显示）但这只会导致路径变为更明显（例如更厚）。然后我通过将UA嗅探重新进行实验，但不是将循环减少50％，实际上将它们增加了500％。再次，这导致小径变得更加明显。然而，看起来这种增厚似乎是渐近的 - 换句话说，通过调整动画速度的参数，我可以通过多大程度来限制路径。

==编辑2 ==

Per @ GGG的其他评论，我去编辑图片以添加一些透明数据，以尝试找到合适的解决方法。我看到的是，图像突出显示在画布的顶部和左侧边缘（即“ Photoshop 画布”，而不是HTML5 <canvas>的“）。当我向顶部和左侧添加相等的透明数据填充时，条纹问题就消失了。这是原始的PSD（pre me-adding-extra-spacing）：



所以我的问题就变成了：即使图像填充（使用非透明像素）整个[Photoshop]画布，为什么我的画布上下文clearRect()表现不好？这不应该抹掉画布范围内的任何东西吗？如果是这样，为什么会留下这几个像素呢？

==编辑3 ==

经过一番研究，结果发现Cairo是几个主要渲染引擎（至少WebKit和Gecko）常用的。可能是这样，正如@JonasWielicki首先提出的那样，开罗图书馆 - 在针对移动执行进行优化时 - 可能有点过于热心了吗？

Answer 1

根据评论，尝试在图像边缘添加一些透明像素作为解决方法。

我真的不知道为什么会这样。我认为它与移动设备上的alpha通道奇怪处理有关，但这只不过是猜测。

我注意到移动浏览器似乎在滚动时丢弃或“估计”alpha通道（慢慢向上和向下滚动，甚至字体看起来更“脆”）。我想知道他们是否将事物分为两个阶段，第二阶段保留alpha通道，如果有另一个“框架”立即跟随当前“框架”，则跳过第二阶段，如果这有意义的话。也许这会让渲染器误以为它没有在它所拥有的地方绘制东西。

无论如何，这可能确实是一个错误报告。我很想知道如果没有其他事情会发生什么事情的真实解释。