1

Пытался добавить к элементу -webkit-backface-visibility: hidden;, но тщетно

Как исправить?

введите сюда описание изображения

1 ответ 1

2

Решение для хрома, внимание костыли

div.bug {
  position:absolute;
  width:120px;
  height:20px;
  padding: 5px;
  text-align:center;
  cursor:pointer;
  font-family: monospace;
  top: 50%;
  left: 50%;
  border: solid;
}

div.bug {
  top: 35%;
  transform:translate(-50%,-50%)
}

div.bug.fix {
  top: 65%;
  transform:translate(calc(-50% - 0.5px),calc(-50% - 0.5px))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<div class="bug">blurry text</div>
<div class="bug fix">blurry text</div>

Смысл в том, что после некоторых css трансформаций, особенно которые отталкиваются от размеров родительского контейнера в % может получится так что край блока попадает не четко в пиксель а между ними, - решение вычитать дробное значение пикселей calc(-50% - 0.5px) - по условию, по которому Вы можете определить размытость текста.


Вот кусок кода из реального проекта:

let blurFix = () => {
    let page = span.querySelector('.login-page');
    if (!page) return;
    let y = this.node.clientHeight % 2 ? "y" : "Y";
    let x = this.node.clientWidth % 2 ? "x" : "X";
    page.className = "login-page " + x + y;
};
.login-page {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 360px;
  height: 360px;
}

.login-page.XY {
  transform: translate(calc(-50%), calc(-50%));
}

.login-page.xY {
  transform: translate(calc(-50% - 0.5px), calc(-50%));
}

.login-page.Xy {
  transform: translate(calc(-50%), calc(-50% - 0.5px));
}

.login-page.xy {
  transform: translate(calc(-50% - 0.5px), calc(-50% - 0.5px));
}

До применения костылей

введите сюда описание изображения

После применения костылей

введите сюда описание изображения

1
  • Я уже решил проблему, спасибо. Выставил родительскому блоку перспективу - нечеткость пропала 21 мар 2019 в 13:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.