-moz-transform not behaving the same as -webkit-transform

Question

I have circular elements that I am filling with quarter-circles to show progression. In Safari, IE and Chrome, these look great and fill the circle as they're supposed to:

However, when I open the same page in Firefox, the transformations are distorted:

The transform code is exactly the same. What could be causing this?

mc c ftl, mc c ftr, mc c fbr, mc c fbl{
overflow: hidden;
position: absolute;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;

-webkit-transform: rotate(0deg) skewX(0deg);
-moz-transform: rotate(0deg) skewX(0deg);
-ms-transform: rotate(0deg) skewX(0deg);
-o-transform: rotate(0deg) skewX(0deg);
transform: rotate(0deg) skewX(0deg);
}

mc c ftl:before, mc c ftr:before, mc c fbr:before, mc c fbl:before{
box-sizing: border-box;
display: block;
border: solid 10px navy;
width: 200%; 
height: 200%;
border-radius: 50%;

-webkit-transform: skewX(-0deg);
-moz-transform: skewX(-0deg);
-ms-transform: skewX(-0deg);
-o-transform: skewX(-0deg);
transform: skewX(-0deg);

content: '';

position: absolute;
z-index: 999;
}

mc c ftr
{
-webkit-transform: rotate(90deg) skewX(0deg);
-moz-transform: rotate(90deg) skewX(0deg);
-ms-transform: rotate(90deg) skewX(0deg);
-o-transform: rotate(90deg) skewX(0deg);
transform: rotate(90deg) skewX(0deg);
}

mc c fbr
{
-webkit-transform: rotate(180deg) skewX(0deg);
-moz-transform: rotate(180deg) skewX(0deg);
-ms-transform: rotate(180deg) skewX(0deg);
-o-transform: rotate(180deg) skewX(0deg);
transform: rotate(180deg) skewX(0deg);
}

mc c fbl
{
-webkit-transform: rotate(270deg) skewX(0deg);
-moz-transform: rotate(270deg) skewX(0deg);
-ms-transform: rotate(270deg) skewX(0deg);
-o-transform: rotate(270deg) skewX(0deg);
transform: rotate(270deg) skewX(0deg);
}

JSFiddle

---

Update

So the issue appears to be with the width of the elements. Does firefox calculate width and height differently than webkit? Perhaps the border is accounted for in width: 200% in Webkit, but not so in Firefox. If I subtract 2*border-width from the width and height, the circles fit in Firefox, but not in Chrome.

Answer 1

you have to add Firefox vendor prefix in your css for box-sizing. I've checked it Firefox 27 and its working..

Here is the Demo.

mc c ftl:before, mc c ftr:before, mc c fbr:before, mc c fbl:before{
    box-sizing: border-box;
    -moz-box-sizing: border-box; /*Added Mozilla Prefix*/
    display: block;
    border: solid 10px navy;
    width: 200%; 
    height: 200%;
    border-radius: 50%;
    -webkit-transform: skewX(-0deg);
    -moz-transform: skewX(-0deg);
    -ms-transform: skewX(-0deg);
    -o-transform: skewX(-0deg);
    transform: skewX(-0deg);
    content: '';
    position: absolute;
    z-index: 999;
}