Question

我发现将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中打开它，您应该明白我的意思。

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

Answer 1

我在Chrome 27 / winXP中测试了同样的小提琴，它的行为与你描述的完全一样;它看起来像是chrome或webkit for windows中的一个bug，我早期使用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; }

Answer 2

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

Answer 3

我对负z索引有同样的问题，如果你能允许的话，一个简单的修复是将html元素overflow-y设置为auto。

html{
    overflow-y: auto;
}

Answer 4

* {
z-index: inherit;
}

适合我。

HTML5 Canvas＆amp; Google Chrome中的z-index问题

4 个答案: