Firefox 3D transform border-radius issues?

Question

I am working on a loader animation that is appearing strange in Firefox. I have a parent div with three inner divs for a 3D animation. In firefox, the lines of the animation appear way smaller than they should be. I'm using Compass for vendor prefixing in Sass but the issue persists.

HTML:

<div class="loader">
        <div class="inner one"></div>
        <div class="inner two"></div>
        <div class="inner three"></div>
</div>

SCSS:

.loader {
          position: relative;
          margin: 0 auto 35px;
          width: 75px;
          height: 75px;
          @media screen and (min-width: 480px){
            width: 125px;
            height: 125px;
          }
          border-radius: 50%;
          @include perspective(800px);
          transform-style: preserve-3d;
        }

        .inner {
          position: absolute;
          box-sizing: border-box;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          width: 100%;
          height: 100%;
          border-radius: 50%;  
        }

        .inner.one {
          left: 0%;
          top: 0%;
          @include animation(rotate-one 1s linear infinite);
          border-bottom: 3px solid $loadercolor;
        }

        .inner.two {
          right: 0%;
          top: 0%;
          @include animation(rotate-two 1s linear infinite);
          border-right: 3px solid $loadercolor;
        }

        .inner.three {
          right: 0%;
          bottom: 0%;
          @include animation(rotate-three 1s linear infinite);
          border-top: 3px solid $loadercolor;
        }

        @include keyframes(rotate-one) {
          0% {
            @include transform(rotateX(35deg) rotateY(-45deg) rotateZ(0deg));
          }
          100% {
            @include transform(rotateX(35deg) rotateY(-45deg) rotateZ(360deg));
          }
        }

        @include keyframes(rotate-two) {
          0% {
            @include transform(rotateX(50deg) rotateY(10deg) rotateZ(0deg));
          }
          100% {
            @include transform(rotateX(50deg) rotateY(10deg) rotateZ(360deg));
          }
        }

        @include keyframes(rotate-three) {
          0% {
            @include transform(rotateX(35deg) rotateY(55deg) rotateZ(0deg));
          }
          100% {
            @include transform(rotateX(35deg) rotateY(55deg) rotateZ(360deg));
          }
        }

Comparing the two side-by-side, changing the border-radius value on Firefox produces much different results than changing it on Chrome. What could be the culprit here? Screenshots below for reference.

on chrome (right):

on firefox (wrong):