[IE 8 이하] 반투명과 Opacity의 잘못된 만남

정말로 오래된 이야기. 아직도 IE 구버전을..(먼산)

IE 8 이하에서 Shadow 효과가 있는 반투명한 이미지에 Opacity를 사용하여 서서히 보이게 하는 애니메이션 효과를 넣으면, 반투명 해야하는 영역이 투명하지 않고 까맣게 변하는 현상이 있었더랬다. 
Opacity 애니메이션 효과가 끝나면 언제 그랬냐는 듯이 정상적인 반투명으로 돌아온다.

우리 이제 그만 헤어지자.. from : http://solidlystated.com/design/ie-png-black-border-on-hover/

그러한 이상한 현상을 없애는 방법으로 다음의 CSS가 쓰인다.

3~4 line을 보면 filter(-ms-filter)를 사용해 gradient 효과를 주었다. gradient의 startColorstr, endColorstr의 값은 두자리씩 각각 alpha, red, green, blue를 의미한다. 자주 쓰는 rgba()와 비교하자면 alpha 값이 끝이 아닌 앞에 붙어 있다.

Gradient Filter — MSDN
https://msdn.microsoft.com/ko-kr/library/ms532997(v=vs.85).aspx

따라서 위의 코드는 시작색과 끝색이 rgba(255, 255, 255, 0)으로 지정된 그라데이션이며 2 line의 background: transparent;와 결과는 같지만, 신기하게도 처음에 언급한 버그인 Opacity 애니메이션 효과와 함께 까맣게 변하는 현상을 방지해준다.

1 line에서 선언된 background:transparent;는 현 상황에서는 의미가 없어보인다. 그러나 filter로 gradient와 같은 그래픽 효과를 선언할때는 항상 같이 붙어다니는 짝꿍같은 녀석이다. 왜냐하면 원하는 색이 나타나려면 기존에 선언된 배경이 없어야(투명해야)하기 때문이다.

다만 마지막 5 line의 zoom:1은 짚고 넘어갈 필요가 있으나.. 이건 하나하나 들어가기 시작하면 정말 끝이 안보이는 물음표의 세계가 나오므로.. 시간 나는대로 업데이트 하기로…

앞으로도 계속 써야 하나?

IE 10 버전부터 filter(-ms-filter)는 지원하지 않으며, 사용자가 강제로 호환성 보기나 IE 8 이하로 보더라도 반투명이 까맣게 변하는 현상은 이제 나타나지 않는다.

하지만 안타깝게도 Windows 7에 기본으로 딸려오는 브라우저는 IE 8 버전이다. 아직은 무시할 수 없는걸까..