Firefox：“转换：转换（％）”加上“过滤器：阴影”使文本模糊

Question

当我添加transform: translate (x%, y%)和filter: drop-shadow (...)时，文本在Firefox中变得模糊。

有人知道如何解决吗？

我设法仅在Firefox for Mac上进行了测试，@ abney317在Windows上进行了测试，并确定了问题所在。

document.querySelector('.bt').addEventListener('click', function () {
    let a = document.querySelector('.a');

    if (a.classList.contains('a--shadow')) {
        a.classList.remove('a--shadow');
    } else {
        a.classList.add('a--shadow');
    }
})

.a {
    position: absolute;
    padding: 15px;
    background:#fff;
    transform: translate(50%, 50%);
}

.a::after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-right: .5rem solid transparent;
    border-left: .5rem solid transparent;
    border-bottom: .5rem solid #fff;
    top: -.5rem;
    left: .5rem;
}

.a--shadow {
    filter: drop-shadow(rgba(0, 0, 0, .9) 0 0 0.125rem);
}

<button class="bt">Toogle drop-shadow filter</button>

<div class="a">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</div>