IE에서 focus()가 정상적으로 처리되지 않는 현상

하고 싶었던 것

1 2 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 4 5 6 7

리스트의 각 항목을 클릭했을 때, 말줄임(....)으로 가려져있던 내용이 펼처지고 배경색을 전환함으로써 active상태를 알리고자 했다.처음엔 CSS의 focus상태를 활용해서 a태그로 감사져있는 콘텐츠를 누르면 overflow를 visible로 전환하고 색상을 애니메이션으로 리니어하게 바꾸면 되겠다 싶었다.

<a class="active-wrapper" href="#">
        <span style="width: 10%;">1</span>
        <span style="width: 10%;">2</span>
        <span style="width: 30%;">가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
        <span style="width: 10%;">4</span>
        <span style="width: 10%;">5</span>
        <span style="width: 10%;">6</span>
        <span style="width: 10%;">7</span>
        <span style="width: 10%;"><img src="../images/ico_info.png" alt=""></span>
    </a>

DOM 구조는 대충 요렇게...

&:focus{
    background-color: rgb(237,242,249);
    &>span{
      animation: active 0.5s linear forwards;
    }
  }


@keyframes active {
  50%{
    color: #fff;
  }
  100%{
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-wrap: normal;
    color: #232323;
  }

}

대충 디자인 코드는 생략하고.. focus와 animation은 대충 이렇게? 하면 되지 않을까 싶었다.
결과는.. 된다!! 그런데 크롬에서만 된다!!

IE에서는 작동을 하지 않았다. 그래서 찾아보니..

The above code is working fine in Firefox (FF), but not in Internet Explorer (IE). Actually the IE is supporting the focus() method, we just need to use other way to write the focus method.

Base on my personal observation, this is because IE run the focus() method before the textbox render properly. However the Javascript is put after the textbox, the focus() method suppose to execute after textbox fully render itself, may be IE treat it as different ways? Ya, IE always have “IE-ONLY” implementation…

Here is an unofficial solution, we have to use the setTimeout() fucntion to delay the focus() execute time.

setTimeout(function() { document.getElementById('myInput').focus(); }, 10);

요렇게 돼있는데, 대충 보면 DOM이 렌터링되기 전에 focus를 실행하느라 꼬인다는 내용인것 같다. 망.. IE는 참 손댈게 많은듯.
그래서 setTimeout으로 시도해봤는데, 안됐다. 왜 안됐는지는 귀찮아서 알아보지 않았다. 왜냐면 구현하려고 하는걸 굳이 focus로 해야한다고 고집할 이유는 없었으니까.

그래서 상단 소스에서 focus에 있는 코드를 .active에 정의하고 스크립트로 .active를 토글해서 마무리했다.
한가지 발견한 것은 애니메이션 내부에서 overflow상태를 변화시킬 수 없다는 것이었다.(IE에서)
결국 

overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-wrap: normal;

요부분을 애니메이션이 아니라 .active안으로 옮겨서 해결했다.