4

キャンバスにz-indexを適用すると、 Chromeが適切position:fixedに持つ他のすべての要素のレンダリングを停止することがわかりました。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 で同じフィドルをテストしましたが、説明どおりに動作します。Windows 用の chrome または webkit のバグのようです。chrome 23/linux で初期にテストしたところ、問題なく動作しました。

h1とキャンバスの両方を固定divでワープすることで、回避策のjsfiddleを見つけました 。

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

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 
* {
z-index: inherit;
}

私のために働きます。

于 2015-01-12T19:40:48.887 に答える
0

Win8のChromeでその問題が発生し、キャンバスと兄弟をposition:fixedにしても役に立ちませんでした。キャンバス DIV に負の z-index があることがわかりました。コードを再配置して z-index を正の値にすると、キャンバスでオーバーレイ DIV のちらつきがなくなりました

于 2013-07-01T12:11:52.807 に答える
0

負の z-index で同じ問題が発生しました。許可できる場合の簡単な修正は、html 要素の overflow-y を auto に設定することです。

html{
    overflow-y: auto;
}
于 2014-03-13T17:06:50.373 に答える