Google Chrome - context.canvas.width/context.canvas.width导致"蓝色图层"

Question

我今天从Chrome版本17升级到Chrome:18.0.1025.142.

我注意到我正在处理的一个网络应用程序有一个奇怪的蓝色层,在加载时出现,然后在你开始滚动时消失.

我在JS中跟踪了以下几行:

                context.canvas.width = canWidth;
                context.canvas.height = canHeight;

canWidth和canHeight是动态生成的.

注释这些线会阻止蓝色层渲染,但这不是一个修复,因为我需要使用动态生成的值来控制画布宽度/高度.

我还尝试将context.canvas.width和context.canvas.height硬编码为600,这也产生了蓝色层问题.

这在以前版本的Chrome上不是问题,我在FireFox中没有任何问题.

关于问题可能是什么的任何建议？

编辑:

以下是上面所在的代码块(nodeLeft和nodeTop生成在其他位置):

                context.clearRect ( 0 , 0 ,canWidth, canHeight );
                context.canvas.width = canWidth;
                context.canvas.height = canHeight;                                 
                context.beginPath();
                context.moveTo(x, y);
                context.lineTo(nodeLeft, nodeTop);
                context.strokeStyle = "#000000";
                context.lineCap = "round";
                context.stroke();

Answer 1

编辑：

好的，我帮我拿到了。这似乎是某些 AMD 显卡的问题。我可以在催化剂控制中心关闭铬的高性能模式。这解决了大部分对我来说烦人的事情......希望它能在下一个版本中得到解决。

有关更多信息，请参阅：http://code.google.com/p/chromium/issues/detail ?id=121658

这不是解决方案，但我面临着同样的问题，这让我发疯。我正在努力确定它。我在不同的机器上测试了不同的浏览器：

问题：

• 蓝色图层（只有在 Chrome 未最大化时我才能看到它们）
• y 滚动条错位（有时仅在我切换选项卡时才会显示）
• 形状扭曲。画布的大小和绘制的图像/形状因 Chrome 和其他浏览器而异。意味着 Chrome 上的画布/形状更小，它主要缩小了宽度。

结论1： 似乎并不是每台装有Chrome 18.xx的机器上都会发生这种情况似乎是硬件问题，但实际上无法进一步限制它。

结论2： 如果我将画布的大小设置为200高度/宽度，则不会出现问题。如果我将其设置为高于 200，则会导致画布/矩形变形并出现其他问题。

结论 3： 只有在画布上绘制某些内容或设置某些内容（即 fillStyle）时，问题才会出现。

这是我使用的测试片段：

<canvas id="canvas" width="300" height="300" style="background-color:orange"></canvas>
...
ctx.fillRect (10, 10, 55, 50);