CSS 전환을 사용하면 크롬이 검은 색으로 깜박입니다.

Question

전환 회전으로 인해 크롬이 검은 색 화면으로 깜박입니다. Chrome 버그 (Safari에서 잘 작동 함)인가요 아니면 영리한 CSS로 해결할 수 있습니까?

div { 
 
    width:200px; 
 
    height:200px; 
 
    position:relative; 
 
    background:#ddd; 
 
} 
 

 
span { 
 
    display:inline-block; 
 
    position:absolute; 
 
    top:40px; 
 
    left:40px; 
 
    width:20px; 
 
    background:#007; 
 
    height:10px; 
 
    -webkit-transition: all .5s; 
 
} 
 

 
div:hover > span { 
 
    -webkit-transform: rotate(180deg); 
 
}

<div> 
 
    <span></span> 
 
</div>

예 fiddle here.

이 문제의 문제점은 매번 발생하지 않으므로 회색 사각형을 여러 번 가리켜 야하며 화면이 검은 색으로 깜박 여야합니다.

는 테스트 :
크롬 16.0.912.75
크롬 카나리아 18.0.1010.0
을

작품 미세에 :
사파리 5.1.2 (6534.52.7)

스노우 레오파드 (Snow Leopard)

의 모든 테스트

Answer 1

변형 된 요소의 부모에 -webkit-transform: translate3D(0, 0, 0)을 부여하여 컴 포지 팅을 지속하도록 수정할 수 있습니다.

div { width:200px; height:200px; position:relative; background:#ddd; -webkit-transform: translate3D(0, 0, 0)} 
 
span { display:inline-block; position:absolute; top:40px; left:40px; width:20px; background:#007; height:10px; -webkit-transition: -webkit-transform .5s; } 
 
div:hover > span { -webkit-transform: rotate(180deg); }

<div> 
 
    <span></span> 
 
</div>

체크 아웃 바이올린 : http://jsfiddle.net/UHLFF/