저사양의 안드로이드 디바이스가 특정버전에서 canvas내의 결과가 중복되어 노출되는 이슈가 있었다. 양상은 단순히 사양 문제로 하드웨어 가속과 관련된 이슈가 아닐까 했고, 관련하여 아래와 같이 일종의 CSS Hack으로 해결하는 방법들이 있었다.

Html5 Canvas drawing issue - duplicated drawing - when parent has overflow:hidden

  • 모든 부모 엘리먼트에 overflow:hidden 값 제거
  • Canvas 요소에 position:absolute 값 추가
  • 특정 px 값으로 width, height 속성 지정
  • 모든 부모 엘리먼트에 overflow-x:visible 값 추가
  • 첫번째 드로잉이 끝나고, “canvas.width = canvas.width” 실행
  • Canvas 요소의 부모에 z-index 값 추가
  • 하드웨어 가속 속성 제거

첫 번째 방법을 통해 문제가 해결되었지만, Hack을 이용한 해결책은 근본적인 해결책이 아니다. 더 복잡한 다른 이슈를 야기시킬 가능성이 있기에 관련된 내용을 좀 더 알아보기로 했다.

해당 이슈는 서양권에서 clearRect bug 라고 보고되고 있다.

canvas의 내용을 지우는 claerRect 함수가 저사양 브라우저에서 제대로 동작하지 않는 것으로, 해당 함수의 호출 이후에 캔버스 영역을 강제로 다시 렌더링 시키는 방법으로 문제를 해결한다.

canvas.clearRect(0, 0, w, h);
canvas.style.display = ‘none’; // Detach from DOM
canvas.offsetHeight; // Force the detach
canvas.style.display = ‘inherit’; // Reattach to DOM

위 내용은 이 블로그의 포스팅을 통해 좀 더 자세히 확인할 수 있다.