css transform делает нечетные вещи на firefox

Question

Что-то раздражало меня об этой кнопке, которую я только что сделал, текст кажется слегка перемещенным относительно тела кнопки, используя translate:transform. Я галлюцинирую?

.clicky1:active { 
 
    margin-bottom:-2px; 
 
\t margin-top:2px; 
 
} 
 

 
.clicky2:active { 
 
    transform:translate(0px, 2px); 
 
} 
 

 
.butt { 
 
    padding:20px; 
 
    display:flex; 
 
\t justify-content:center; 
 
\t align-items:center; 
 
    
 
    font-size:30px; 
 
    
 
    background-color:rgb(240,240,240); 
 
    border:1px solid black; 
 
} .butt:hover { 
 
    background-color:white; 
 
} 
 

 
.cont { 
 
    display:flex; 
 
    justify-content:space-around; 
 
    align-items:center; 
 
    
 
    width:100%; 
 
    height:200px; 
 
}

<div class="cont"> 
 
    <div class="butt clicky1">button1</div> 
 
    <div class="butt clicky2">button2</div> 
 
</div>

только появляется на светлячок, а не в хроме.

Если я не сумасшедший, как я могу обойти его, не прибегая к использованию поля (так как он должен быть общим классом, а у меня есть другое использование для поля в зависимости от контекста)?

Answer 1

Я вижу это, но я думаю, что это просто визуальная аномалия в том, как FF передает текст, когда элемент использует перевод (возможно, ошибку). Я заметил, что странное явление визуализации текста исчезнет, ​​когда я изменил уровень масштабирования страницы Firefox, а также ширину браузера.

Я разместил ниже фрагмент ответа, который использует position:relative; и top:2px;, чтобы выполнить то, что вы делаете с переводом, и не вмешиваясь в поля. Оказывается, для отображения текста, как и следовало ожидать, по крайней мере, в моем тестировании

Чешуйчатых вверх Снимок экрана Strange визуализации текста феномена:

РЕШЕНИЕ SNIPPET

.clicky1:active { 
 
    margin-bottom:-2px; 
 
\t margin-top:2px; 
 
} 
 

 
.clicky2:active { 
 
    /* Change transform:translate(0px, 2px); to */ top: 2px; 
 
} 
 

 
.butt { 
 
    /*add*/position: relative; 
 
    padding:20px; 
 
    display:flex; 
 
\t justify-content:center; 
 
\t align-items:center; 
 
    
 
    font-size:30px; 
 
    
 
    background-color:rgb(240,240,240); 
 
    border:1px solid black; 
 
} 
 

 
.butt:hover { 
 
    background-color:white; 
 
} 
 

 
.cont { 
 
    /*add*/position: relative; 
 
    display:flex; 
 
    justify-content:space-around; 
 
    align-items:center; 
 
    
 
    width:100%; 
 
    height:200px; 
 
}

<div class="cont"> 
 
    <div class="butt clicky1">button1</div> 
 
    <div class="butt clicky2">button2</div> 
 
</div>