NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


IE6 Flicker Bug를 execCommand문으로 해결하는 방법.

본문 건너 뛰기

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문을 사용할 때 어떤 문제가 발생할 수 있다고 판단되시면 코멘트 부탁드립니다.

참조문서

 

분류: CSS,자바스크립트 | 2008년 4월 29일, 3:59 | 정찬명 | 댓글: 6개 |
트랙백URI - http://naradesign.net/wp/2008/04/29/140/trackback/

6개의 댓글이 있습니다.

  1. 김주원 댓글:

    expression 비표준 아닌가요?
    css Validation 에 오류로 걸려지는 사항이기도 합니다.
    자바스크립트로 처리하는것이 좋을것 같은데요

  2. 성민장군 댓글:

    미투데이에서 말씀드렸듯 해당 글과 관련된 내용을 보고 개인적으로 expression 활용보다 javascript 활용 방법으로 전환했었습니다.
    사실 구체적인 데이터로 정리해본 적이 없어서 저도 확답은 못할 것 같습니다.

    http://neonatas.tistory.com/39

    이곳에서 관련 내용보시고, 멋지게 플리커버그에 대한 정리글 부탁드릴께요~

  3. 윤좌진 댓글:

    성민님이 걸어놓은 링크에 정리가 잘 되어 더 설명이 필요 없겠네요 ^^
    execCommand에 BackgroundImageCache가 ie6.0 서비스팩1 이후부터 적용이 되는 거였는건
    처음 알았습니다. ^^ 그런데…
    여기와 http://neonatas.tistory.com/39
    여기에 http://blog.eloitcube.co.kr/27
    차이점을 모르겠네요… 블로그 주인이 같은 분인지…
    아니면 그대로 긁어다 포스팅 한건지…-_-;;
    처음엔 똑같은 블로그 인줄 알고 엄청 헷갈렸다는..-_-;;;

  4. 정찬명 댓글:

    김주원님, 안녕하세요? 말씀하신대로 expression은 CSS에서 표준 문법이 아니고 Javascript로 처리하는 것이 좋겠다는 의견이 타당한것 같습니다 ^^ 이와 관련한 내용을 첨언하여 본문을 수정해 두었습니다. 감사합니다.

  5. 정찬명 댓글:

    성민장군님이 링크해 주신 포스트에 정리가 잘 되어 있어서 본문을 약간 수정하고 해당 내용을 인용해 두었습니다. 적절한 코멘트 감사드립니다.

  6. 정찬명 댓글:

    좌진님, 두곳 포스팅한 날짜를 확인해보면 어느 포스팅이 원본인지 확인이 되더라구요 ^^;

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님