Firefox 3D变换border-radius问题？

Question

我正在开发一个在Firefox中显得很奇怪的加载器动画。我有一个带有三个内部div的父div用于3D动画。在firefox中，动画的线条看起来比它们应该的小。我在Sass中使用Compass进行供应商添加前缀，但问题仍然存在。

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));
          }
        }

比较两个并排，改变Firefox上的border-radius值会产生与在Chrome上更改它的结果大不相同的结果。这可能是罪魁祸首？以下屏幕截图供参考。

铬上的

（右）：

on firefox（错误）：