HTML5 Canvas& Google Chrome中的z-index问题 [英] HTML5 Canvas & z-index issue in Google Chrome
问题描述
我发现将z-index应用于具有 position：fixed 的画布会导致Chrome停止渲染所有其他具有位置的元素：正确地修正了。但是，只有在画布大小超过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>测试标题< / h1>
< canvas id =backgroundCanvaswidth =956height =256>< / canvas>
< script>
//绘制基本形状
（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中打开，您应该明白我的意思。
我的问题是，有谁知道我可以解决这个问题的一种方法？
我在Chrome 27 / winXP上测试了同样的小提琴，它的表现与你描述的完全一样;它看起来像一个铬或窗口的webkit中的错误，我早期用chrome 23 / linux进行了测试，并且它工作正常。
我发现一个workarround jsfiddle 通过扭曲h1和具有固定div的canvas：
< div id ='fixedContainter'>
< h1>测试标题< / h1>
< canvas id =backgroundCanvaswidth =956height =256>< / canvas>
< / div>
如果你的意图是使它成为背景。
CSS：
#fixedContainter {position：fixed; z-index：-10; }
h1 {position：fixed;}
body {height：2000px; }
canvas {position：fixed; z-index：-10; }
I have found that applying a z-index to a canvas that has position:fixed causes Chrome to stop rendering all other elements which have position:fixed properly. However, this only happens if the canvas is greater than 256x256px in size.
Here's an example:
<!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>
If you paste this into a html document and open it in Chrome, you should see what I mean.
My question is, does anyone know of a way I can get around this issue?
I tested the same fiddle in Chrome 27/winXP and it behaves exactly as you describe; It looks like a bug in chrome or webkit for windows, I tested early with chrome 23/linux and it worked OK.
I found a workarround jsfiddle by warping both, the h1 and the canvas with a fixed div:
<div id='fixedContainter'>
<h1>Test Title</h1>
<canvas id="backgroundCanvas" width="956" height="256"></canvas>
</div>
The div should also have z-index:-10 if your intent is to make it a background.
CSS:
#fixedContainter{position: fixed; z-index: -10; }
h1{position: fixed;}
body{height: 2000px; }
canvas{ position: fixed; z-index: -10; }
这篇关于HTML5 Canvas& Google Chrome中的z-index问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
