CSS rotating preloader wobbles in ie

Question

I am trying to create a nice animated pre-loader which I have taken from here:

https://ihatetomatoes.net/demos/css3-preloader/

A problem has been pointed out to me that the animation "wobbles" in ie. If you take a look at that link, you will be able to see the wobbling. The code I have used to generate this is:

@mixin rotate($deg) {
    -webkit-transform: rotate($deg + deg); /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate($deg + deg); /* IE 9 */
    transform: rotate($deg + deg); /* Firefox 16+, IE 10+, Opera */
}

#loader {
    @include make-loader;
    display: block;
    position: relative;
    left: 50%;
    border-radius: 50%;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: $primary;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    z-index: 1002;

    &.static {
        opacity: 1 !important;
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
        -webkit-transform: rotate(45deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(45deg); /* IE 9 */
        transform: rotate(45deg); /* Firefox 16+, IE 10+, Opera */
        &::before {
            -webkit-animation-play-state: paused;
            animation-play-state: paused;
            -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg); /* IE 9 */
            transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
        }

        &::after {
            -webkit-animation-play-state: paused;
            animation-play-state: paused;
            -webkit-transform: rotate(45deg); /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(45deg); /* IE 9 */
            transform: rotate(45deg); /* Firefox 16+, IE 10+, Opera */
        }
    }

    &::before {
        content: "";
        position: absolute;
        border-radius: 50%;
        border-style: solid;
        border-color: rgba(255, 255, 255, 0);
        border-top-color: $secondary;
        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    &::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border-style: solid;
        border-color: rgba(255, 255, 255, 0);
        border-top-color: $tertiary;
        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }
}

@-webkit-keyframes spin {
    0% {
        @include rotate(0);
    }

    100% {
        @include rotate(360);
    }
}

@keyframes spin {
    0% {
        @include rotate(0);
    }

    100% {
        @include rotate(360);
    }
}

My mixin probably won't help as it just sets widths and heights:

@import "../../global/variables";

@mixin make-loader ($multiplyer: 1) {
    width: $multiplyer * ($loader-width * .7);
    height: $multiplyer * ($loader-height * .7);
    margin: ($multiplyer * $loader-margin-top) ($multiplyer * $loader-margin-right) ($multiplyer * $loader-margin-bottom) ($multiplyer * ($loader-margin-left * .7));
    border-width: $multiplyer * $loader-item-border-width;

    @include extra-small-width {
        width: $multiplyer * $loader-width;
        height: $multiplyer * $loader-height;
        margin-left: ($multiplyer * $loader-margin-left);
    }

    &.static {
        margin: ($multiplyer * $loader-static-margin-top) ($multiplyer * $loader-static-margin-right) ($multiplyer * $loader-static-margin-bottom) ($multiplyer * $loader-static-margin-left);
    }

    &::before {
        top: $multiplyer * $loader-first-item-top;
        left: $multiplyer * $loader-first-item-left;
        right: $multiplyer * $loader-first-item-right;
        bottom: $multiplyer * $loader-first-item-bottom;
        border-width: $multiplyer * $loader-item-border-width;
    }

    &::after {
        top: $multiplyer * $loader-second-item-top;
        left: $multiplyer * $loader-second-item-left;
        right: $multiplyer * $loader-second-item-right;
        bottom: $multiplyer * $loader-second-item-bottom;
        border-width: $multiplyer * $loader-item-border-width;
    }
}

I have read here: Wobbly CSS Animation with Border-Radius in Internet Explorer that it could be due to outline:1px solid transparent;. I am not using outline but I am using transparent borders, so I have changed them to be rgba(255, 255, 255, 0); but the issue is still there.

Does anyone have any idea why?