Пытался добавить к элементу -webkit-backface-visibility: hidden;, но тщетно
Как исправить?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуРешение для хрома, внимание костыли
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));
}
До применения костылей
После применения костылей