在Firefox中使用动画3d CSS转换时的工件

Question

我正在处理的站点中的元素周围出现这些奇怪的工件。它发生在FF中，而不是Chrome。到目前为止，我已经尝试过各种修复方法，包括“ translateZ（1px）”，“ back-vis-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%);
    }
}