Firefox: `transform: translate (%)` плюс `filter: drop-shadow` делает текст размытым - PullRequest
Новая
       22

Firefox: `transform: translate (%)` плюс `filter: drop-shadow` делает текст размытым

0 голосов
/ 07 июня 2019

Когда я добавляю transform: translate (x%, y%) и filter: drop-shadow (...), текст в Firefox размывается.

Кто-нибудь знает, как решить эту проблему?

Мне удалось протестировать только в Firefoxдля 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>
...