Как избавиться от размазывания текста при «transform»?

Question

[ArgoSH]

Привет
Сделал легкую "анимацию" для блоков на сайте. На мак ос все ок, а на виндоусах при срабатывании анимации размазывается текст блока.

Пример_1:

.m_2 {
  transition: 0.3s transform;
}

.m_2:hover {
  transform: scale(1.05);
  transition: 0.3s transform;
}

Пример_2:

.voice {
  border-radius: 9px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
  display: grid;
  transition: 0.3s transform;
}

.voice:hover {
  box-shadow: 0px 3px 9px rgba(0,0,0,0.3);
  transform: translate3d(2px, -5px, 2px);
  transition: 0.3s transform;
}

Есть какое-то решение? Можно ли/нужно ли переводить анимацию на js

Посмотреть о чем я говорю можно на сайте

Comments

[Пашенька]

Чем меньше осей задействовано, тем лучше будет выглядеть. Да и в вашем случае нелепо выглядит смещение по x.

Можно ли/нужно ли переводить анимацию на js

Какая разница? Через js пикселы будут выглядеть по другому?

Answer 1

[David King]

Я фиг знает, но почему ты в hover написал transition:

.m_2:hover {
  transform: scale(1.05);
  transition: 0.3s transform;
}

Типа, зачем?

Comments

[Пашенька]

не ведает, что творит