Internet Explorer 6 이하 버전에서 이미지가 반짝이는 Flicker 버그가 있다(flicker는 "깜빡이다"라는 뜻의 영어 단어입니다). 이 버그는 Internet Explorer 인터넷 옵션에서 일반 탭 -> 임시 인터넷 파일 설정을 "페이지를 열 때마다"로 지정하면 배경 이미지가 깜빡이게 한다. 실제로 깜빡이기만 하는 것이 아니라, 이미지를 계속 새로 호출하므로 네트웍 자원을 사용하는 것은 물론, 페이지의 처리가 늦어져 전체적으로 느리게 만든다. 자세한 현상은 여기서 확인해볼 수 있다.
이 버그는 다음과 같은 상황에서 발생한다고 알려져있다.
- 이미지의 가로x세로 곱이 2500 픽셀이 안될 때
- 배경 이미지가 투명 색상이 포함된 GIF 파일일 때
background-color속성이transparent가 아닐 때background-repeat속성이repeat가 아닐 때background-position이 설정되어 있을 때
[adsense]
적지 않은 경우이고 도저히 피해가기 힘든 경우이지만, 일반적인 사용자들의 임시 인터넷 파일 설정이 "자동으로"이기 때문에 이 버그를 잘 모르는 개발자가 많다(하지만, 지금은 꽤 잘 알려진 버그라 많은 사람이 알고 있다).
이 버그를 수정할 수 있는 방법으로는 CSS expression을 사용하는 방법, 서버에서 HTTP 헤더를 고치는 방법, 자바스크립트를 사용하는 방법이 있지만, 일반적으로 HTTP 헤더를 고치는 방법은 HTML이나 CSS를 다루는 방법에 비해 부담스러운 것이 사실이므로 이 글에서는 다루지 않는다.
CSS expression은 CSS에서 자바스크립트 코드를 이용하는 방법인데, 경우에 따라 expression에 할당된 코드에 대해 너무 많은 연산이 일어나므로 추천하고 싶은 방법은 아니다. 또한, 어차피 CSS expression도 자바스크립트 코드를호출하므로, 자바스크립트를 사용할 수 없는 환경에서 사용할 수 없는 것은 다음에 다룰 자바스크립트를 이용하는 방법과 같으므로, 큰 이점이 없다 하겠다.
자바스크립트를 다루는 방법은 간단하게 다음의 한 줄만 실행시키면 된다.
document.execCommand('BackgroundImageCache', false, true);
하지만, 브라우저 종류나 상태에 따라 에러가 발생할 수도 있기 때문에 현재 나와있는 팁들은 다음과 같은 방법을 권장하고 있다.
try { document.execCommand('BackgroundImageCache', false, true); }catch(e){}
결국, 이런 식의 코드가 문서에 포함될 것이다.
하지만, 처음에 밝혔듯이 이 버그는 IE6에서만 발생하는 것이므로, IE 6 에서만 작동하도록 하는 것이 좋다. 따라서, 최종적인 코드는 다음과 같이 조건부 주석을 사용해 작성할 수 있다. 따라서, 최종적인 코드는 다음과 같은 모양이 된다.