emptinessandform
@emptinessandform

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

Решил я сделать эффект для кнопки, что бы она при наведении с лева на право заполнялась другим цветом. У меня получилось, но все шрифты в документе стали размытыми, хотя я не трогал их стили.
Я выяснил что это из за двух свойств
transform: translateZ(0);
  backface-visibility: hidden;

не знаю будет ли видно7922328288ad47a48f89882c44c17916.jpg

а вот с выключенными свойствами 94e24aef92ac457ab974f4c3c1e8d48f.jpg
//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%;
    }
  }
}
  • Вопрос задан
  • 2329 просмотров
Пригласить эксперта
Ответы на вопрос 2
IonDen
@IonDen
JavaScript developer. IonDen.com
Включенный transform: translateZ(0); для слоя убирает привязку к пиксельной сетке. По этому всё и размывает слегка, так как уже другой механизм рендерит этот слой.
Ответ написан
@ferdasfarmazone
Верстальщик!
will-change: transform;
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы