On scrolling fonts become lines?

Question

I'm working in centos 7. Then i'm developing the web tool for biologist. My project has to come final stage. But now i facing one critical problem. The problem is fonts, while scrolling down and up on the div.

I added the images below. The each pagination page is dynamically generated by javascript.

[Image1] is the original.

[Image2] after scroll into the content the font is get lines.

Then i checked the several browser in several machines i got this problem in two different machine. What is the problem? How can i solve this.?

Answer 1

Looks like GPU rendering issue may be try changing CSS text-rendering although i am not sure that will work for sure

try these one by one of the div or whatever container they are in

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

Answer 2

You can set mouse wheel event to render the scrolled div for every animation frame. A code like this might work for you:

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>

Basically, use the function setScrollAnimationFrame on your scroll div.

Answer 3

The behavior is explicit to scroll attempt on unfinished parsing of the document/element content. Rare on graphic card capacity issues.

The scroll is not effectively triggering or is holding back a redraw on the element.

The cause:

A. Element has not finished loading its content or parsing all child nodes. There are HTML errors on the document structure regarding the scroll element. Bad html nesting, invalid positioning, code junk on your html stream, making it hesitate for on scroll redraw. Check for 'malformed html' errors on generated code if any.

B. Check memory consumption of you app and inspect for memory leaks.

Answer 4

Try promoting the layer that is disturbed by the scrolling (the element turning into lines) to its own layer.

.messed_up_element {
  transform: translateZ(0);
}