4

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

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

4

4 回答 4

3

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

我通过使用固定 div 扭曲 h1 和画布找到了一个 workarround jsfiddle：

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

​</p>

于 2012-12-13T14:51:50.600 回答
0

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

于 2013-07-01T12:11:52.807 回答
0

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

html{
    overflow-y: auto;
}
于 2014-03-13T17:06:50.373 回答
0 
* {
z-index: inherit;
}

为我工作。

于 2015-01-12T19:40:48.887 回答