Проблема с ростом Firefox?

Question

Это codepen я работаю для часов http://codepen.io/www139/pen/MaxGyW

Это то, что он должен выглядеть следующим образом:

Если рассматривать это в FireFox [он работает в любом другом браузере на OS X, что я испытал], это выглядит следующим образом:

что я могу сделать, чтобы работать, как и в первом примере в Firefox и почему это происходит?

Вот мой HTML, CSS и JavaScript:

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#projectContainer { 
 
    background-color: #eee; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
#verticalAlign { 
 
    -o-transform: translate(0%, -50%); 
 
    -moz-transform: translate(0%, -50%); 
 
    -webkit-transform: translate(0%, -50%); 
 
    -ms-transform: translate(0%, -50%); 
 
    transform: translate(0%, -50%); 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
} 
 
#watchBelt {} #watchContainer { 
 
    display: table; 
 
    margin: auto; 
 
    width: 50vh; 
 
    height: 50vh; 
 
    position: relative; 
 
    border-radius: 50%; 
 
    padding: 2vh; 
 
    background-color: #AB9883; 
 
} 
 
#watchStructure { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#watchFace { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
    /*background: -ms-linear-gradient(-35deg, #444, #eee); 
 
    background: -moz-linear-gradient(-35deg, #444, #eee); 
 
    background: -webkit-linear-gradient(-35deg, #444, #eee); 
 
    background: -o-linear-gradient(-35deg, #444, #eee); 
 
    background: linear-gradient(-35deg, #444, #999); 
 
    position:relative;*/ 
 
    background-color: #0E1021; 
 
    position: relative; 
 
} 
 
#watchHourHand { 
 
    height: 40%; 
 
    width: 5%; 
 
    background-color: #eee; 
 
    position: absolute; 
 
    left: 47.5%; 
 
    top: 10%; 
 
    -o-transform-origin: bottom center; 
 
    -moz-transform-origin: bottom center; 
 
    -webkit-transform-origin: bottom center; 
 
    -ms-transform-origin: bottom center; 
 
    transform-origin: bottom center; 
 
} 
 
#watchMinuteHand { 
 
    width: 3%; 
 
    height: 50%; 
 
    background-color: #eee; 
 
    position: absolute; 
 
    left: 48.5%; 
 
    -o-transform-origin: bottom center; 
 
    -moz-transform-origin: bottom center; 
 
    -webkit-transform-origin: bottom center; 
 
    -ms-transform-origin: bottom center; 
 
    transform-origin: bottom center; 
 
} 
 
#watchSecondHand { 
 
    width: 2%; 
 
    height: 50%; 
 
    background-color: #eee; 
 
    position: absolute; 
 
    left: 49%; 
 
    -o-transform-origin: bottom center; 
 
    -moz-transform-origin: bottom center; 
 
    -webkit-transform-origin: bottom center; 
 
    -ms-transform-origin: bottom center; 
 
    transform-origin: bottom center; 
 
} 
 
* { 
 
    -o-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -webkit-transition: all .5s ease; 
 
    -ms-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
    -webkit-backface-visibility: hidden; 
 
} 
 
.noTransition { 
 
    -o-transition: none !important; 
 
    -moz-transition: none !important; 
 
    -webkit-transition: none !important; 
 
    -ms-transition: none !important; 
 
    transition: none !important; 
 
}

<div id="projectContainer"> 
 
    <div id="verticalAlign"> 
 
    <div id="watchContainer"> 
 
     <div id="watchBelt"></div> 
 
     <div id="watchStructure"> 
 
     <div id="watchFace"> 
 
      <div id="markers"></div> 
 
      <div id="watchHourHand"></div> 
 
      <div id="watchMinuteHand"></div> 
 
      <div id="watchSecondHand"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Это происходит потому, что дочерний элемент для display:table, не установлен в display:table-cell.

обновление ваш CSS, добавив display:table-cell в #watchStructure

#watchStructure{ 
    width:100%; 
    height:100%; 
    display:table-cell; 
}