58

Recently I've been working on building a tree-view component 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

Chrome gif

Firefox

Firefox gif

Edge

Edge gif

e-cloud
  • 4,331
  • 1
  • 23
  • 37
  • 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 Jul 20 '17 at 20:36
  • 5
    I should mention that I've found a related issue in Chromium issue tracker https://bugs.chromium.org/p/chromium/issues/detail?id=727239 – e-cloud Jul 21 '17 at 01:03
  • @bigless, But i am glad you provide another perspective to the problem. – e-cloud Jul 21 '17 at 01:07
  • Then browser maybe returns something that it shouldnt and it breaks handling in zone.js. But if it is related to browser, who em I ;) Hope it'll be fixed soon. Good luck ;) – bigless Jul 21 '17 at 09:02
  • if its helps, I could see this in Chrome 58 as well. – Prajwal Jul 21 '17 at 10:25
  • Are you using linux chromium browser? You may also find that it blinks a white screen from time to time when the browser is displaying an opacity change on the whole page – PauAI Feb 26 '18 at 12:58
  • 1
    I couldn't even run the provided demo plunkr – Kiran Shakya Apr 05 '18 at 10:44
  • Demo `plunker` links are not loading the app – Munim Munna Apr 06 '18 at 21:18
  • @KiranShakya sorry, it's because the angular version is not updated then crashed. – e-cloud Apr 08 '18 at 07:29
  • plunker demo doesn't load for me either. – Daniel Tate Apr 18 '18 at 04:54
  • @Daniel, plz take a look again, I've deprecated the old link. – e-cloud Apr 18 '18 at 05:03
  • 1
    Have you tried disabling `smooth scrolling` in `chrome://flags/`? – Sanxofon May 09 '18 at 03:01
  • Plunker demo does not run. Maybe use StackBlitz - Plunker is consistently failing to load Angular apps these days – Drenai May 28 '18 at 15:51

1 Answers1

2

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

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

That branch is 105 commits 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 commit message.

Zenexer
  • 18,788
  • 9
  • 71
  • 77
  • In fact, i am the developer. Yes i use another way to avoid this issue. Although that branch is a little bit old, the core algorithm is nearly the same. `It incorrectly sets margin-top` may not be correct, for it works in edge and firefox. – e-cloud Jun 11 '18 at 06:13