CSS Transition не работает на Firefox

Question

Я работаю над переходом onmouse hover div. Эффект должен быть слиянием текста с вершины на середину div, в то время как div поворачивается от квадрата к кругу. Проблема в том, что если в FireFox работает эффект «квадрат-круг», но не текст, сбрасываемый сверху, этот эффект работает только в 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/.

Спасибо, Виктор

Answer 1

Удаление overflow:hidden из #tab1:hover решает эту проблему. Here's a fiddle показывает, что он работает как в Firefox (а также в Chrome и IE).

Это может быть вызвано this bug: «Переходы CSS не запускаются из-за реконструкции кадра предка или самого себя ...»; изменение overflow приводит к тому, что #tab1 перерисовывается одновременно с началом перехода, поэтому его дочерний элемент .tab1h не переходит к переходу.