Firefox에서 CSS 전환이 작동하지 않습니다.

Question

나는 onmouse에서 div로 전환하는 전환 작업을하고 있습니다. 이 효과는 div의 꼭대기에서 가운데로 병합되는 텍스트 여야하며 div는 사각형에서 원으로 바뀝니다. 문제는 파이어 폭스에서 원형 효과의 제곱근이 작동하지만 위쪽에서 텍스트가 떨어지지 않는 경우이 효과는 Chrome 및 IE에서만 작동한다는 것입니다. 누구나 전에이 문제가 발생했는지, 누군가 왜 이런 일이 일어 났는지 말해 줄 수 있습니까? 내 버튼의 코드는 다음과 같습니다 : 그래서 여기

#navigation{ 
font-size:14px; 
float:left; 
left:0; 
height:100%; 
position:static; 
width:65px; 
margin-top:6.5%; 
margin-left:10%; 
} 


#tab1{ 
float:left; 
width:65px; 
height:65px; 
left:0; 
transition:all 1s, all 1.1s; 
-webkit-transition:all 1s, all 1.1s; 
-moz-transition:all 1s, all 1.1s; 
margin-top:40px; 
box-shadow: 1px 1px 2px #000; 
} 

.tab1h{ 
width:65px; 
height:65px; 
visibility:none; 
position: absolute; 
opacity: 0; 
vertical-align: middle; 
text-align:center; 
transition:all 1s, all 1.1s; 
-webkit-transition:all 1s, all 1.1s; 
-moz-transition:all 1s, all 1.1s; 
} 


#tab1:hover { 
border-radius:50%; 
overflow:hidden; 
visibility:none; 
} 


#tab1:hover > .tab1h { 
visibility:visible; 
float:left; 
opacity:1; 
padding-top:20px; 
} 
    <div id="navigationi"> 
      <a href="index.html" > 
       <div id="tab1" style="background-color:#f5f4f0; font-size:14px;"> 
        <div class="tab1h"> 
        Home 
        </div> 
       </div> 
      </a> 
</div> 

내 HTML과 CSS입니다 또한 여기에 JSFiddle http://jsfiddle.net/MFcS5/이다.

감사합니다, 빅터

#tab1:hover에서 overflow:hidden 제거

Answer 1

문제를 해결합니다. Here's a fiddle은 Firefox 및 Chrome뿐 아니라 Internet Explorer에서도 작동합니다.

this bug : "조상의 프레임 재구성으로 인해 CSS 전환이 시작되지 않음 ..."; overflow을 변경하면 전환이 시작될 때 동시에 #tab1이 다시 그려 지므로 그 자식 .tab1h이 전환되지 않습니다.