滚动字体变成线条？

Question

我在centos 7工作。然后我正在为生物学家开发网络工具。我的项目必须进入最后阶段。但现在我面临着一个严重的问题。问题是字体，而在div上向下和向上滚动。

我添加了下面的图片。每个分页页面都是由javascript动态生成的。

[Image1]是原版。

滚动到内容后，

[Image2]字体获取行。

然后我检查了几台机器中的几个浏览器，我在两台不同的机器上遇到了这个问题。问题是什么？我该如何解决这个问题呢？

Answer 1

看起来GPU渲染问题可能会尝试更改CSS文本渲染，虽然我不确定它是否可以肯定

逐个尝试div或其所在的容器

text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

Answer 2

您可以设置鼠标滚轮事件以渲染每个动画帧的滚动div。像这样的代码可能适合你：

function setScrollAnimationFrame(node) {

  var wheelCallback = function(e) {
    e = e || window.event;
    e.preventDefault();
    e.stopPropagation();

    requestAnimationFrame(function() {
      var delta = (e.detail ? e.detail * (-40) : e.wheelDelta) / 120;
      node.scrollTop -= delta * 40;
    });
    return false;
  };


  if (window.attachEvent) node.attachEvent("onmousewheel", wheelCallback);
  else node.addEventListener("mousewheel", wheelCallback);

  try {
    if (window.attachEvent) node.attachEvent("onDOMMouseScroll", wheelCallback);
    else node.addEventListener("DOMMouseScroll", wheelCallback);
  } catch (ex) {}
}

setScrollAnimationFrame(document.getElementById("scroll"));

#scroll {
  height: 300px;
  overflow: auto;
}
#scrollInner {
  height: 800px;
  background: black;
}

<div id="scroll">
  <div id="scrollInner"></div>
</div>

基本上，使用滚动div上的函数setScrollAnimationFrame。

Answer 3

对未完成的文档/元素内容解析进行滚动尝试的行为是明确的。 图形卡容量问题很少见。

滚动无法有效触发或阻止重绘元素。

原因：

一个。 Element尚未完成加载其内容或解析所有子节点。 关于滚动元素的文档结构上存在HTML错误。 糟糕的html嵌套，无效的定位，你的html流上的代码垃圾，让它在滚动重绘时犹豫不决。检查格式错误的html＆＃39;生成的代码上的错误（如果有）

B中。检查应用程序的内存消耗并检查内存泄漏。

Answer 4

尝试将受滚动（元素变为线条）干扰的图层提升为自己的图层。

.messed_up_element {
  transform: translateZ(0);
}