Почему размывает шрифты и как с этим бороться?

Question

[emptinessandform]

Решил я сделать эффект для кнопки, что бы она при наведении с лева на право заполнялась другим цветом. У меня получилось, но все шрифты в документе стали размытыми, хотя я не трогал их стили.
Я выяснил что это из за двух свойств

transform: translateZ(0);
  backface-visibility: hidden;

не знаю будет ли видно

а вот с выключенными свойствами

//BUTTONS
.btn {
  color: #fff;
  padding: 15px 55px;
  background: transparentize($main-color, 0.2);
  border-radius: 0;
  transition: all 0.3s;
  position: relative;
  transform: translateZ(0);   <--- вот эти свойства
  backface-visibility: hidden; <---
  border: none;
  &:active,
  &:focus {
    color: #ffffff;
  }
  &:before {
    top: 0;
    left: 0;
    content: '';
    background: #fff;
    transition: all 0.3s;
    z-index: -1;
    display: block;
    width: 0%;
    height: 100%;
    position: absolute;
  }
  &:hover {
    color: $main-color;
    &:before {
      width: 100%;
    }
  }
}

Comments

[emptinessandform]

Александр А:
1. я посмотрел как делается в библиотеке hover.css ianlunn.github.io/Hover но у них не расплывается, а у меня плывет.
2. а это я в документации sass смотрел и там было несколько функций в разделе прозрачности и я взял первую

Answer 1

[Денис Инешин]

Включенный transform: translateZ(0); для слоя убирает привязку к пиксельной сетке. По этому всё и размывает слегка, так как уже другой механизм рендерит этот слой.

Comments

[emptinessandform]

ianlunn.github.io/Hover в этой библиотеке используется transform но все четко. Пытаюсь понять как.

[emptinessandform]

и я же стили применяю к кнопке, а размывает все

[Денис Инешин]

emptinessandform: потому что в ней трансформ применяется только при наведении и изначально его нет.

[emptinessandform]

Денис Инешин: я понял, по чему все элементы размывает. Я использовал центрирование с transform: translate(-50%, -50%); у всего блока. Как только я убрал центрирование, то все сразу перестало размываться. Внешний transform мешал внутреннему.

Answer 2

[Василь Бойко]

will-change: transform;