在Google Chrome中，HTML5 Canvas和z-index问题

Question

在Google Chrome中，HTML5 Canvas和z-index问题

4

我发现给一个具有position:fixed属性的画布应用z-index会导致Chrome无法正常渲染所有其他具有position:fixed属性的元素。但是，只有当画布大小大于256x256像素时才会发生这种情况。

以下是一个示例：

<!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中打开，您应该知道我的意思。

我的问题是，有人知道我如何解决这个问题吗？

- Khior

你好！我在[jsfiddle]（http://jsfiddle.net/roimergarcia/gmvL7/）上测试了这段代码，在Chrome 23 / Linux中看起来很好：我可以看到一个画有五边形绿色图形的画布，并且标题（h1）元素重叠在其上。您的电脑上看到了什么？ - Roimer

我也有同样的问题。但是，如果我尝试向下滚动，那么标题会向上消失，尽管它的position:fixed;。只有当我调整浏览器大小时，它才会在正确的位置呈现。 - Khior

我正在使用Chrome V23.0.1271.64和Windows 7。 - Khior

很奇怪，这在我的电脑上没有发生：当我滚动时，画布和标题都保持固定在屏幕上。尝试使用Chrome检查HTML，看看标题是否真的得到了CSS规则。还可以尝试修复不同的元素（div、span等），看看行为是否相同。同时也可以尝试水平滚动。 - Roimer

当我检查元素时，它会突出显示应该出现的区域，但它就是没有呈现出来。它具有应该具有的所有CSS，并且在其他浏览器中运行良好（甚至IE9！）似乎发生在任何类型的固定元素上。我被难住了！ - Khior

在我的着陆页面上，我使用了一个全屏固定画布，并将索引设为-1，其他元素没有问题（不多，但它们可以呈现）（请查看：http://abdiassoftware.com/），感觉有点奇怪。 - user1693593

4个回答

0

* {
z-index: inherit;
}

对我来说有效。

- silago

0

我也遇到了负的 z-index 的问题，如果可以接受的话，一个简单的解决办法是将 HTML 元素的 overflow-y 设置为 auto。

html{
    overflow-y: auto;
}

- woprsk

0

我在Win8上使用Chrome时遇到了这个问题，将canvas和它的兄弟元素设置为position:fixed并没有帮助我解决问题。后来我发现canvas DIV上有负的z-index值。当我重新排列代码并将z-index值改为正数后，canvas就不再闪烁我的覆盖层DIV了。

- Mladen Janjetovic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roimer · Accepted Answer

我在Chrome 27/winXP中测试了相同的实例，它的表现正如你所描述的一样；看起来是Windows上Chrome或WebKit的一个漏洞，我早先在chrome23/linux中进行了测试，结果是正常的。

我找到了一个解决方法jsfiddle，通过使用一个固定的div包含h1和canvas：

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