Как исправить рендеринг текста в фиксированном блоке? - PullRequest
Новая
       1

Как исправить рендеринг текста в фиксированном блоке?

0 голосов
/ 26 октября 2019

Есть проблемы с отображением текста в браузере Chrome, ошибка работает, если в теле есть прокрутка (как правило, на 99% сайтов, мой тоже). Я изменяю только положение, но текст не работает должным образом, как это исправить? 

$('#button').on('click', function() {
  $('.block').toggleClass('fixed');
});
body {
  height: 5000px;
  margin: 0;
  font-family: sans-serif;
}

.block {
  position: static;
  top: 0;
  left: 0;
  width: 80%;
  padding: 30px;
  font-size: 18px;
  color: red;
  background-color: #03121b;
}

.fixed {
  position: fixed;
}

h1 {
  margin: 0;
}

button {
  position: absolute;
  left: 30px;
  bottom: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block fixed">
  <h1>Some text blurred</h1>
</div>

<button id="button">toggle .block{ position: fixed; }</button>

1 Ответ

0 голосов
/ 27 октября 2019 
transform: translate3d(0,0,0);

Добавление этого свойства в дочерний элемент .block исправит эту ошибку.

...