Google ChromeでのHTML5 Canvasとz-indexの問題：fixed配置要素が正しく描画されないバグと解決策

問題の概要

position: fixed が設定された canvas 要素に z-index を適用すると、Google Chrome において position: fixed を持つ他のすべての要素が正しく描画されなくなる不具合が発生します。

注意すべき点として、この現象は canvas のサイズが 256×256px より大きい場合にのみ発生します。それ以下のサイズであれば、同様の問題は起こりません。

原因と背景

これは Chrome のレンダリングエンジンにおけるコンポジットレイヤー（合成レイヤー）の処理に関連する既知の挙動です。固定位置の大きな canvas に z-index を与えると、レイヤーの重なり順（スタッキング順序）の再計算が正しく行われず、他の fixed 配置要素が意図した位置・順序で表示されなくなります。

解決策：fixed の div で囲む

最もシンプルな回避策は、h1 と canvas の両方を position: fixed を指定した div 要素でラップすることです。これにより、スタッキングコンテキストが親コンテナ内で完結し、Chrome の描画バグを回避できます。

<div id = 'fixcontainer'>
    <h1>Test Title</h1>
    <canvas id = "backgroundCanvas" width = "1000" height = "300"></canvas>
</div>

CSS の設定例

h1{
    position: fixed;
}
body{
    height: 1500px;
}
canvas{
    position: fixed; z-index: -10;
}

補足ポイント

上記の CSS では、canvas をページ背景として扱うために z-index: -10 を指定しています。親コンテナ（fixcontainer）側でも fixed 配置を明示することで、子要素同士の重なり順がコンテナ内で管理され、他の fixed 要素との干渉を防げます。

同様の症状に遭遇した場合は、まず canvas のサイズが 256×256px を超えていないかを確認し、該当する場合はこのラップ方式を試してみてください。