Когда я добавляю 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>