IE7 이하 zoom 스타일 제어시 Flash object가 사라지는 버그

뭐, 상당히 예전에 겪었던 문제였는데 참고 차원에서 정리하는 포스팅입니다. 요즘은 크로스브라우징 얘기도 많고 최신형 브라우저들 자체가 zoom 기능을 자체지원을 하고 있다지만 IE6이 브라우저 점유율을 독식하고 있을 때쯤은 퀵바에 +, - 버튼을 달아놓고 자바스크립트로 IE 전용 CSS 속성인 zoom 을 제어해서 확대와 축소를 하는 기능이 유행이던 시절이 있었습니다.

그런데 zoom으로 제어하는 부분에 플래시 오브젝트가 있을 경우 zoom 스타일 제어와 동시에 플래시 오브젝트가 갑자기 사라져버리거나 깨져버리는 경우가 있습니다. 해당 내용에 대하여 검색해보니 외국사이트에서 이런 현상이 일어나는 조건이 정리된 간단한 테스트 페이지를 찾을 수 있었습니다.(http://www.consol.co.il/test.asp)

해당 현상이 일어나는 조건을 간단히 정리하자면 다음과 같습니다

  • 플래시 오브젝트의 정렬값이 center 혹은 right이다(제 기억으로는 css text-align 속성으로 정렬하는 경우도 마찬가지였을겁니다)
  • zoom의 범위는 어떤 수치던지 상관없다
  • 플래시 오브젝트의 wmode가 opaque 혹은 transparent 로 설정되어 있다
  • IE 버전이 7 이하이다(IE8에서 호환성보기 모드로 해봤는데 버그가 일어나질 않는군요)

딱히 이 버그를 한방에 해결할 수 있는 방법은 없는 것 같고요… 저 조건들을 피해야겠죠. 사실 요즘은 zoom 속성을 float 해제용 정도로만 쓰잖아요. 이런 문제가 생길일은 극히 드물겠지만 한번 정리해봤습니다 (__)