Google Chrome 中的 HTML5 Canvas 和 z-index 问题答案

【问题标题】：HTML5 Canvas & z-index issue in Google ChromeGoogle Chrome 中的 HTML5 Canvas 和 z-index 问题
【发布时间】：2012-12-01 04:55:50
【问题描述】：

我发现将 z-index 应用于具有 position:fixed 的画布会导致 Chrome 停止正确渲染所有其他具有 position:fixed 的元素。但是，只有当画布的大小大于 256x256px 时才会发生这种情况。

这是一个例子：

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <style>
    h1     { position: fixed; }
    body   { height: 2000px; }
    canvas { position: fixed; z-index: -10; }
  </style>
</head>
<body>
  <h1>Test Title</h1>
  <canvas id="backgroundCanvas" width="956" height="256"></canvas>
  <script>
  // draw basic shape
  (function() {
    var c = document.getElementById("backgroundCanvas");
    var ctx = c.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(0,100);
    ctx.lineTo(0,0);
    ctx.lineTo(100,0);
    ctx.lineTo(1000,1000);
    ctx.fillStyle = "rgb(117, 164, 68)";
    ctx.fill();
    ctx.closePath();
  })();
  </script>
</body>
</html>

如果您将其粘贴到 html 文档中并在 Chrome 中打开它，您应该会明白我的意思。

我的问题是，有谁知道我可以解决这个问题的方法吗？

【问题讨论】：

嗨！我在jsfidle 中测试了这段代码，在 Chrome 23/Linux 中对我来说看起来不错：我可以看到一个画布，上面绘制了一个五边绿色形状，并且标题 (h1) 元素与它重叠。你在电脑上看到了什么？
我也看到了。但是，如果我尝试向下滚动，则标题会向上消失，尽管是 position:fixed;。当我调整浏览器大小时，它只会在正确的位置呈现。
我使用的是 Chrome V23.0.1271.64 和 Windows 7
这很奇怪，它不会发生在我的电脑上：当我滚动画布时，标题仍然固定在屏幕上。尝试用 chrome 检查 html，看看标题是否真的得到了它的 css 规则。还可以尝试修复不同的元素（div、span ...）并查看行为 id 是否相同。也尝试水平滚动。
当我检查元素时，它会突出显示它应该在的区域，但它只是没有呈现在那里。它具有应有的所有 CSS，并且在其他浏览器（甚至 IE9！）中也能正常工作。这似乎适用于任何类型的固定元素。我被难住了！

标签： html google-chrome html5-canvas z-index

【解决方案1】：

我在 Chrome 27/winXP 中测试了相同的小提琴，它的行为与您描述的完全一样；它看起来像 chrome 或 webkit for windows 中的一个错误，我早期使用 chrome 23/linux 进行了测试，它运行正常。

我发现了一个 workarround jsfiddle 通过扭曲 h1 和带有固定 div 的画布：

<div id='fixedContainter'>
    <h1>Test Title</h1>
    <canvas id="backgroundCanvas" width="956" height="256"></canvas>
</div>

如果您的意图是使其成为背景，该 div 还应具有 z-index:-10。

CSS：

#fixedContainter{position: fixed; z-index: -10; }
h1{position: fixed;}
body{height: 2000px; }
canvas{ position: fixed; z-index: -10; }

【讨论】：

这需要我将所有固定位置元素保存在同一个容器元素中，但幸运的是，这适用于该应用程序。干得好！
不客气 :) ... 还有一点：在 chrome/windows 中我看不到垂直滚动条，但在 chrome/Linux 中我可以；我确定这不是功能，而是 chrome 或 webkit 中的错误。

【解决方案2】：

我在 Win8 上的 Chrome 中遇到了这个问题，使画布和兄弟位置：固定并没有帮助我。我发现我在画布 DIV 上有负 z-index。当我重新排列代码并使 z-index 为正时，画布停止闪烁我的叠加 DIV

【讨论】：

【解决方案3】：

负 z-index 也有同样的问题，如果允许的话，一个简单的解决方法是将 html 元素 overflow-y 设置为 auto。

html{
    overflow-y: auto;
}

【讨论】：

【解决方案4】：

* {
z-index: inherit;
}

为我工作。

【讨论】：