Есть некоторый текст, который развернут на 90deg.
span {
-webkit-font-smoothing: subpixel-antialiased;
text-rendering: optimizeSpeed;
backface-visibility: hidden;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
/* Customizer */
.container {
height: 2000px;
background: #eee;
}
span {
position: fixed;
right: 1rem;
top: 20%;
font-size: 2rem;
}
<div class="container">
<span>some text</span>
</div>
Проблема: Текст смазан, не корректно отображается.
Вопрос: Как можно исправить отображение текста (и можно ли вообще исправить), чтобы он был четким, а не "размазаным" (расплывчатым)?
P.S: В данном примере он постоянно такой, в моем проекте он в таком виде, только при скролле (когда перестаешь скроллить страницу - нормально отображается).
font-family
то на мой взгляд проблема пропадает codepen.io/Geyan/pen/YGvBky?editors=110