Recently I've been working on building a tree-view ponent library for Angular, as ngx-tree.

Problem

Soon after I figured out how to implement a virtual-scroll feature for this library for performance with large data set, and got it to run properly in Firefox, I am trapped by a weird scrolling behavior in Blink-included browsers(like Chromium, Chrome, Opera).

Demo link

Here is the demo plunkr -- see Update #1 below

Situation

• In Firefox, Edge and IE 11, my library with virtual scroll feature works in expectation with smooth scrolling.
• However, in Chrome and Opera, when I scroll to some positions inside the tree-view, the position of the scrollbar(which is the scrollTop property of scroll area) jump up and down, causes a flickering tree-view and break down the virtual-scroll feature.

browser detail version

• Chrome - 59.0.3071.115
• Firefox - 54.0
• Edge - 40.15063.0.0

other browsers

In China, there are some shelled browsers derived from Chromium project(like 360se, QQ browser, Sogou browser, UC browser) with older version of V8 and blink. And they don't have that weird scroll behavior.

Some Assumption

Is it caused by some optimization on the scroll implementation(like smooth scrolling) by the Chromium team?

Hope to get some guides!!! (≧﹏ ≦)

Update #1

Demo link update with event log: /

One must test the scrolling before opening devtool to see the logs

I have to explain a little more how the virtual-scrolling works and what's causing the flickering.

First, see the design of Virtual Scrolling.

A key point of virtual scrolling is， we create a fake scroll area the same size as that area without virtual scrolling instrumented. So in an optimal situation, the scrollbar position of the scroll area ought not to change until some expected events trigger its changes. For scroll event, we update the view for every animation frame.

Within a height-fixed scrolling area, we assume a truth that the scrollTop property will not change with a large percentage, if we simulate the those unrendered elements' height properly(there could be a bit of deviation for the calculation accuracy) within an animation frame.

However, based on my observed results, the blink-series browsers seems to perform a different strategy to update the scrollTop of the scrollable element. Its timing to update the scrollTop is different than none-blink-series browsers. That all I've figured out so far.

Sample gifs

Here I made some gifs to show the output of Chrome, Firefox, and Edge.

Chrome

Firefox

Edge

Recently I've been working on building a tree-view ponent library for Angular, as ngx-tree.

Problem

Soon after I figured out how to implement a virtual-scroll feature for this library for performance with large data set, and got it to run properly in Firefox, I am trapped by a weird scrolling behavior in Blink-included browsers(like Chromium, Chrome, Opera).

Demo link

Here is the demo plunkr -- https://embed.plnkr.co/xMpmK5EBC46tDKpYFpw8 see Update #1 below

Situation

• In Firefox, Edge and IE 11, my library with virtual scroll feature works in expectation with smooth scrolling.
• However, in Chrome and Opera, when I scroll to some positions inside the tree-view, the position of the scrollbar(which is the scrollTop property of scroll area) jump up and down, causes a flickering tree-view and break down the virtual-scroll feature.

browser detail version

• Chrome - 59.0.3071.115
• Firefox - 54.0
• Edge - 40.15063.0.0

other browsers

In China, there are some shelled browsers derived from Chromium project(like 360se, QQ browser, Sogou browser, UC browser) with older version of V8 and blink. And they don't have that weird scroll behavior.

Some Assumption

Is it caused by some optimization on the scroll implementation(like smooth scrolling) by the Chromium team?

Hope to get some guides!!! (≧﹏ ≦)

Update #1

Demo link update with event log: https://embed.plnkr.co/GpQBZsguhZZOQWWbZnqI/

One must test the scrolling before opening devtool to see the logs

I have to explain a little more how the virtual-scrolling works and what's causing the flickering.

First, see the design of Virtual Scrolling.

A key point of virtual scrolling is， we create a fake scroll area the same size as that area without virtual scrolling instrumented. So in an optimal situation, the scrollbar position of the scroll area ought not to change until some expected events trigger its changes. For scroll event, we update the view for every animation frame.

Within a height-fixed scrolling area, we assume a truth that the scrollTop property will not change with a large percentage, if we simulate the those unrendered elements' height properly(there could be a bit of deviation for the calculation accuracy) within an animation frame.

However, based on my observed results, the blink-series browsers seems to perform a different strategy to update the scrollTop of the scrollable element. Its timing to update the scrollTop is different than none-blink-series browsers. That all I've figured out so far.

Sample gifs

Here I made some gifs to show the output of Chrome, Firefox, and Edge.

Chrome

Firefox

Edge

• javascript
• angular
• google-chrome
• scroll
• treeview

• 3 With little profiling, it seems like a bug in function setNative (zone.js) There is some kind of handling requestAnimationFrame, but it needs more digging. Initiator is recurrent calling of setNative.apply(window, args) at zone.js:1522 (v0.8.11). It could be also caused by mixing with other library, but when other browsers work... – bigless Commented Jul 20, 2017 at 20:36
• 5 I should mention that I've found a related issue in Chromium issue tracker bugs.chromium/p/chromium/issues/detail?id=727239 – e-cloud Commented Jul 21, 2017 at 1:03
• @bigless, But i am glad you provide another perspective to the problem. – e-cloud Commented Jul 21, 2017 at 1:07
• 1 I couldn't even run the provided demo plunkr – Kiran Shakya Commented Apr 5, 2018 at 10:44
• 1 Have you tried disabling smooth scrolling in chrome://flags/? – Sanxofon Commented May 9, 2018 at 3:01

1 Answer 1

You're pulling the library from the virtual-scroll-demo-branch branch:

'ngx-tree': 'https://rawgit./e-cloud/ngx-tree/virtual-scroll-demo-branch/src/lib',

That branch is 105 mits behind master. It incorrectly sets margin-top on one of the inner elements. This is fixed in newer versions.

Edit: The developer actually referenced this Stack Overflow question in their mit message.