CSS 전환이 IE11에서 100 % 시간이 작동하지 않습니다.

Question

여기에 가면 http://jsbin.com/dibobapaluti/1/edit으로 바뀌면 CSS 전환으로 인해 1 초 후에 링크가 변경됩니다.

IE11에서 해당 링크를 열면 링크가 매우 빠르게 이동하면 1 초 전환이 건너 뛰고 링크의 색과 배경색이 즉시 변경된다는 것을 알 수 있습니다.

Google 크롬에서 동일한 작업을 수행하면 링크가 표시되는 속도에 관계없이 1 초 전환 규칙이 적용됩니다.

이것이 버그인지 아십니까?

a { 
 
    display:block; 
 
    width:130px; 
 
    border:1px solid black; 
 
    background-color:#617ACC; 
 
    color:white; 
 
    padding:3px; 
 
    text-decoration:none; 
 
} 
 
#main-nav { 
 
    padding-left:0; 
 
} 
 
li { 
 
    margin-top:11px; 
 
    list-style:none; 
 
} 
 
a:hover { 
 
    background-color:red; 
 
    color:black; 
 
    width:200px; 
 
    transition-duration:1s; 
 
} 
 
a:link:hover { 
 
    font-size:18px; 
 
} 
 
a:visited { 
 
    color:black; 
 
}

<p>test</p> 
 
<ul id="main-nav"> 
 
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ..." target=_blank>About me</a> 
 
    </li> 
 
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">My adventures</a> 
 
    </li> 
 
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">Want to travel too?</a> 
 
    </li> 
 
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">Contact me</a> 
 
    </li> 
 
</ul>

Answer 1

당신은 공중 선회 상태를 a로의 전환을 적용해서는 안된다.

experimental property을 처리하는 브라우저간에 다른 동작처럼 버그가 있는지 잘 모르겠습니다.

요소가 커서를 놓고 transition을 a:hover에 놓으면 그 요소가 예기치 않게 영향을 미칩니다. 위의 예에서 커서를 요소에서 멀리 떨어 뜨리면 전환하지 않고 커서를 숨겨지지 않은 상태로 다시 스냅합니다. a으로 전환을 이동하면 아래의 데모와 같이 마우스 오버 상태가 더 이상 활성 상태가 아닌 경우 애니메이션이 취소됩니다.

아래의 데모는 IE11에서 문제가되지 않습니다.

CSS/HTML/데모

a { 
 
    display:block; 
 
    width:130px; 
 
    border:1px solid black; 
 
    background-color:#617ACC; 
 
    color:white; 
 
    padding:3px; 
 
    text-decoration:none; 
 
    transition-duration:1s; 
 
} 
 
#main-nav { 
 
    padding-left:0; 
 
} 
 
li { 
 
    margin-top:11px; 
 
    list-style:none; 
 
} 
 
a:hover { 
 
    background-color:red; 
 
    color:black; 
 
    width:200px;   
 
} 
 
a:link:hover { 
 
    font-size:18px; 
 
} 
 
a:visited { 
 
    color:black; 
 
}

<p>test</p> 
 
<ul id="main-nav"> 
 
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ..." target=_blank>About me</a> 
 
    </li> 
 
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">My adventures</a> 
 
    </li> 
 
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">Want to travel too?</a> 
 
    </li> 
 
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">Contact me</a> 
 
    </li> 
 
</ul>

매우 흥미로운