HTML5 Canvas & z-index issue in Google Chrome
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; }
I had that problem in Chrome on Win8, and making canvas and siblings position:fixed did't help me. I found that i had negative z-index on canvas DIV. When I rearrange my code and make that z-index positive, canvas stopped flickering my overlay DIVs
I had the same problem with negative z-indexes, and a simple fix if you can allow for it is to set the html elements overflow-y to auto.
html{ overflow-y: auto;}