CSS текст дрожит Firefox - PullRequest
Новая
       11

CSS текст дрожит Firefox

0 голосов
/ 04 февраля 2019

Я анимирую кнопку и протестировал анимацию в Firefox и Chrome.В Chrome все работает нормально, но в Firefox текст дрожит.Есть ли какая-нибудь вещь, которую я могу использовать -moz, или что-то еще, чтобы это исправить?

Это должно быть очевидно, когда спам щелкает по ней, хотя здесь, во фрагменте, это не происходит даже в Firefox......

РЕДАКТИРОВАТЬ: После небольшого количества проб и ошибок я обнаружил, что проблема заключается в текстовом поле при преобразовании: перевод (-50%, -50%).Знаете ли вы какие-либо альтернативы?Я пробовал относительное позиционирование с верхними 35%, но содержимое коробки вырезано намного раньше

Это то, что я вижу .Движение текста изменяется с увеличением, но я могу заверить вас, что оно меняет положение после наведения, даже если это не ясно из видео. 

.text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.btn:link,
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;    
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    
    transition: all 0.2s;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.20);
}

.btn-white {
    background-color: #fff;
    color: #777;
}
<div class="text-box">
  <a href="#" class="btn btn-white">Click me</a>
 </div>

1 Ответ

0 голосов
/ 04 февраля 2019

Полагаю, это проблема рендеринга в Firefox - поскольку animation-duration является коротким, я думаю, вы можете использовать следующее:

Вместо transition: all 0.2s вы можетесделать transition: box-shadow 0.2s, transform 0.2s до решить это в Firefox - см. демонстрацию ниже: 

.text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.btn:link,
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;    
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: box-shadow 0.2s, transform 0.2s; /* CHANGED */
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.20);
}

.btn-white {
    background-color: #fff;
    color: #777;
}
<div class="text-box">
  <a href="#" class="btn btn-white">Click me</a>
 </div>
...