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.?

looks like a bug, the kind you can't fix, but can only work around. try other fonts or maybe triggering a re-render by changing the opacity to 0.99 or scrolling on short timer or something like that. — dandavis, Apr 25 '16 at 06:09
@dandavis I have already tried to change the fonts but the result is same. I will try other option. — mkHun, Apr 25 '16 at 06:13
@choz I don't know what is the bug. How can i fix this bug. I have tried to change the fonts but it is result is same. — mkHun, Apr 28 '16 at 04:02
Does it happen in other browsers? If only in Firefox, can you try disabling hardware acceleration. **Tools > Options > Advanced > General > Browsing: "Use hardware acceleration when available"**. — Gokhan Kurt, Apr 28 '16 at 05:42
@GökhanKurt This problem is appear in firefox only. I tried but not yet solve. — mkHun, Apr 28 '16 at 05:48
Are there any extensions installed on Firefox? How much populated is the page and the scrolled div? — Gokhan Kurt, Apr 28 '16 at 05:50
Have had the same issue on FF. Fix it with the transform: translateZ(0); declaration which triggers GPU acceleration in modern desktop and mobile browsers. Hope it helps you too. — Jan Franta, Apr 28 '16 at 13:35
@GökhanKurt looks like you are now bounty hunting :) wherever I go I see and it seems you are pretty successfull at It very impressive I checked out your profile — codefreaK, May 04 '16 at 13:34
@SachinDivakar Someone noticed this vigilante bounty hunter :) Yeah, I am actually aiming for fast reps. — Gokhan Kurt, May 04 '16 at 13:39
@GökhanKurt I know me too or else what are the chances we meet here lol — codefreaK, May 04 '16 at 13:42

score 2 · Answer 1 · answered Apr 29 '16 at 10:58

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;

score 2 · Answer 2 · answered May 05 '16 at 02:12

2

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);
}

answered May 05 '16 at 02:12

Andy Hoffman

18,436
4
42
61

score 1 · Answer 3 · answered May 03 '16 at 06:21

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.

score 1 · Answer 4 · answered May 05 '16 at 00:11

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.

On scrolling fonts become lines?

4 Answers4