Check out my current project on Codepen - it's a clock: http://codepen.io/www139/pen/MaxGyW
Here's what it's supposed to look like: https://i.sstatic.net/tOMKh.png
If you're using FireFox, you might notice that it looks different compared to other browsers on OS X: https://i.sstatic.net/u94eJ.png
Can anyone suggest how to make it run smoothly in Firefox like the first example, and what might be causing this issue?
Below is the HTML, CSS, and JavaScript for the project:
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>