ie6에서마우스오버시깜빡거림방지책

IE6 Background Flicker (2006.11월17일)메뉴단 구성시에 많이 쓰이는 형태인 background-image스타일 요소에 hover시켜 마우스 오버시 효과를 주는 메뉴형식이 많이 쓰이게 됩니다.

 

헌데 이럴경우 해당 메뉴부분 hover작동시 번쩍거리는 현상이 IE6에서 발생하게 되는데, 특히 IE6에서 도구->인터넷옵션->임시인터넷 파일설정->저장된 페이지의 새버전 확인->”페이지를 열때마다” 를 선택한 경우이면 확실한 번쩍거림을 볼수 있습니다.

그렇게 번쩍거리는 것은 서버로 이미지요청을 계속 하게되서 보이는 효과로, 결국 대역폭(Bandwidth)이 늘어나고 서버에도 부담을 주게 되고 사용자 환경도 느리게 할수도 있습니다. 반드시 수정해야 한다는!!

관련 내용을 검색 하면서 몇가지 해결책을 찾아 정리해봤습니다. 검색해보니 3가지 정도의 해결법이 있네요. 우선

아파치서버의 경우 아래 코드를 httpd.conf파일에 추가하면 됩니다.

#this stops screen flicker in IE
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary

그러고 난후 아파치에서 mod_expires모듈을 설정 하면 문제가 해결 됩니다.

또는 .htaccess파일에 아래 코드를 넣어도 됩니다.

ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000

IIS 서버의 경우는 여기를 방문해보시면 될것 같습니다.

CSS를 이용한 방법도 소개되고 있어 살펴보니 Background 프로퍼티에 따라서 깜빡거리는 현상이 발생한다고 합니다.

background style에

background-color에 특정색이 설정되는 경우
background-repeat 시키지 않는경우
background-position을 설정하는 경우
와 같이 background요소가 설정되는 경우 flick거리게 됩니다. 또 background요소로 깔리는 이미지 영역이 2500픽셀 미만이 되면 역시 flick하게 됩니다. 가령 아래와 같은 경우는 해당 영역의 총 넓이 값이 2450픽셀로 2500픽셀 미만이므로 깜빡거리게 됩니다.

a {
  width: 49px;
  height: 50px;
}

이 외에도 설정하려는 이미지가 투명이미지인 경우도 그렇습니다.

마지막으로 스크립트를 이용한 방법도 있습니다.

<script>
(function(){
/*Use Object Detection to detect IE6*/
var  m = document.uniqueID /*IE*/
document.compatMode  /*>=IE6*/
!window.XMLHttpRequest /*<=IE6*/
document.execCommand ;
try{
if(!!m){
m("BackgroundImageCache", false, true) /* = IE6 only */
}
}catch(oh){};
})();
</script>

그냥 실행되고록 해놓은 코드로 삽입하면 됩니다. flicker현상을 위한 코드는 아닌데 부수적으로 flicker 효과를 없애는 역활까지 해주는거 같네요. IE6 에서만 문제되는 현상이기 때문에 해당 코드 삽입 형식에 제일 편하지 않을까 합니다 

참고사이트.
http://www.hedgerwow.com/360/bugs/dom-fix-ie6-background-image-flicker.html
http://www.fivesevensix.com/studies/ie6flicker/
http://dean.edwards.name/my/flicker.html