ie flicker 버그와 관련된 글

원인 : http://www.fivesevensix.com/studies/ie6flicker/

 

해결방법 : http://naradesign.net/wp/2008/04/29/140/

내용 :

Flicker Bug 개요

IE6 이하 버전을 사용하는 사용자가 ‘저장된 페이지의 새 버전 확인’ 옵션을 ‘페이지를 열때마다’로 두었을 때 IE는 이미 로드된 숨은 이미지를 화면에 다시 출력해야 하는 경우 이것을 캐시로부터 찾지 않고 출력하는 순간마다 다시 서버측에 요청하는 버그가 있습니다. 이것은 익히 잘 알려진 Flicker 버그 입니다. 한 가지 예로서 :hover 라는 가상선택자를 사용하여 배경이미지를 교체시키는 기법을 사용할 때 IE는 교체될 이미지를 캐시에서 불러오지 않고 실시간으로 서버측에서 다시 불러오기 때문에 사용자가 깜빡거림을 느끼게 됩니다. 이것은 깜빡거림만 문제가 되는것이 아니라 불필요한 http 요청이 반복적으로 일어난다는 사실로 하여금 IE브라우징시 웹페이지의 성능을 떨어뜨리는 요인이 됩니다.

Flicker Bug 해결방법

여기 IE Flicker Bug를 MS에서 제공하는 execCommand문으로 해결하는 잘 알려진 방법이 있습니다.

Javascript 문법으로는 아래와 같이 표현합니다.

try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}

CSS 문법으로는 아래와 같이 표현합니다.

html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

CSS 또는 Javascript 문법 가운데 택일하여 적용하시면 Flicker Bug를 해결할 수 있지만 실제 적용하는 경우 Javascript코드를 활용하는 방법이 권장됩니다.

CSS 문법이 지닌 문제는 BackgroundImageCache Identifier(배경이미지 캐시 식별자)가 없는 브라우져에 대한 예외처리가 없다는 점, 그리고 한번만 수행하면 되는 코드가 지속적으로 수행된다는 점 입니다.
참조 : http://neonatas.tistory.com/39

이 문법은 W3C 표준과 무관하게 MS에서 제공된 것이며 IE 브라우저에서만 인식하기 때문에 다른 브라우저들은 무시합니다.  또한 Windows XP SP1 이후의 운영체제, 또는 IE 브라우저의 6.00.2800.1106 이후 버전에 적용됩니다. 이 문법들이 안정적인지에 대하여는 보증할 수 없습니다. 현재와 같은 방식으로 execCommand문을 사용할 때 어떤 문제가 발생할 수 있다고 판단되시면 코멘트 부탁드립니다.

참조문서

• No more IE6 background flicker – http://evil.che.lu/2006/9/25/no-more-ie6-background-flicker
  
• MS의 execCommand설명 – http://msdn2.microsoft.com/en-us/library/ms536419(VS.85).aspx
• Available memory decreases when you view a Web page in Internet Explorer 6 Service Pack 1 – http://support.microsoft.com/kb/823727
• High Performance Web Sites > Avoid CSS Expressions – http://stevesouders.com/examples/rule-expr.php