Артефакты при использовании анимированных трехмерных CSS-преобразований в Firefox

Question

У меня есть эти странные артефакты, появляющиеся вокруг элементов на сайте, над которым я сейчас работаю. Это происходит в FF, но не в Chrome. Я пока что безуспешно пробовал различные исправления, в том числе с использованием 'translateZ (1px)', 'backface-visibility: hidden;', 'background-clip: content-box;', 'background-clip: padding-box; ' и т.д.

Код ниже, и вот ссылка Codepen: https://codepen.io/anon/pen/QZYNEz

<div class="feature-imgs">
    <a href="#" class="gallery" data-type="image">
        <img src="#" alt="" />
    </a>
    <a href="#" class="gallery" data-type="image">
        <img src="#" alt="" />
    </a>
</div>

.feature-imgs {
    height:100%;

    a {
        position: absolute;
        top:50%;
        left:0%;
        width:90%;
        padding-bottom:100%;
        overflow:visible;
        transform:translateZ(1px) translateY(-50%) perspective(1000px) rotate3d(0,1,0,-10deg);
        background-clip: padding-box;
        transition: transform 0.4s 0.2s, top 0.4s 0.2s, left 0.4s 0.2s, width 0.4s 0.4s;
        margin-top:-10px;
        opacity:1;
        z-index:1;
        img {
            position: absolute;
            top:0;
            left:0;
            width:100%;
            opacity:0.8;
            transition:opacity 0.4s;
            transform:translateZ(1px) translateY(-2%);
            animation:floaty 4s ease infinite alternate;
            box-shadow:rgba($black, 0.1) 10px 10px 20px;
        }
        &:after {
            display: block;
            clear:both;
            float:none;
            content:"";
        }
        &:nth-of-type(2n) {
            left:10%;
            top:60%;
            z-index:0;
            img {
                animation:floaty 4s ease 1.5s infinite alternate;
            }
        }
    }
}

@keyframes floaty {
    0% {
        transform:translateZ(1px) translateY(-2%);
    }
    100% {
        transform:translateZ(1px) translateY(2%);
    }
}