CSS 3.0 - 크롬에서 잔상이 남는 버그

 시간이 지남에 따라 서서히 폭이 줄어드는 Timer 개념의 막대기를 만들었습니다. 뒤에 검은색 배경의 막대기를 두고 앞에 있는 파란색의 막대기가 점점 줄어드는 형태인데, 익스플로러에서는 재대로 작동을 하였으나 크롬에서는 줄어들면서 검은색 막대기에 파란색 막대기의 잔상이 남는 현상이 발생했습니다. Javascript에 문제가 있나 싶어서 이리저리 수정해 보았으나 재대로 작동하지 않았습니다. 그래서 구글을 검색해보니 CSS 문제였습니다.
 position이 fixed로 되어있을 때 해당 CSS를 변경해주면 잔상이 남는 문제였습니다. 문제 해결 방법은 간단했습니다. CSS 한 줄 추가해주면 끝입니다.

-webkit-transform: translateZ(0) 

  알아보니 -transform이 해당 객체에 동적인 효과를 줄 수 있는 기능이라고 합니다. 크롬은 웹 패킷 기반 브라우져라서 앞에 접두사로 -webkit이 들어가고 파이어폭스는 -moz, 오페라는 -o가 들어간다고 합니다. translateZ(0)는 z-index값을 0으로 자꾸 변경한다는 뜻을 내포하는 것 같은데, 이게 잔상이랑 정확하게 무슨 상관이 있는지 까지는 잘 모르겠군요. 아마 z-index 위치를 자꾸 0으로 조절해서 잔상이 남는 효과를 지워주는게 아닌가 싶습니다.