Question

在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>

Answer 1

transform: translate3d(0,0,0);

将此属性添加到.block子元素将解决此错误。

如何修复固定块中的文本渲染？

1 个答案: