Chrome에서 발생하는 HTML5 Canvas z-index 렌더링 오류와 해결 방법

Chrome에서 Canvas z-index가 고정(fixed) 요소 렌더링을 막는 문제

position: fixed가 적용된 canvas 요소에 z-index를 설정하면, Chrome에서 position: fixed를 사용하는 다른 요소들이 정상적으로 렌더링되지 않는 버그가 발생할 수 있습니다.

특히 이 문제는 canvas의 크기가 256×256px보다 클 경우에만 나타난다는 점이 특징입니다. 작은 canvas에서는 문제없이 동작하기 때문에 원인을 파악하기 어려울 수 있습니다.

해결 방법: h1과 canvas를 하나의 fixed 컨테이너로 감싸기

가장 간단한 해결책은 문제가 되는 h1과 canvas 요소를 하나의 position: fixed 컨테이너 div로 함께 감싸는 것입니다. 이렇게 하면 두 요소가 같은 쌓임 맥락(stacking context) 안에 배치되어 Chrome의 렌더링 버그를 우회할 수 있습니다.

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

적용된 CSS 코드

위 구조에 사용된 CSS는 다음과 같습니다.

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

문제가 발생하는 이유

Chrome은 GPU 가속을 활용해 렌더링 레이어를 합성(compositing)하는데, 일정 크기 이상의 canvas에 음수 z-index를 적용하면 레이어 순서 계산 과정에서 충돌이 생겨 다른 fixed 요소가 화면에서 사라지거나 깨져 보일 수 있습니다. 요소들을 하나의 부모 컨테이너로 묶으면 브라우저가 이를 단일 레이어로 처리하기 때문에 문제가 해결됩니다.