1346159 - Scroll performance issues with react-virtualized after enabling APZ

Status: NEW

(Core :: Panning and Zooming, enhancement, P3)

Description

[Ricky Chien [:rickychien] (inactive)]

The way we improve devtools is that try to adopt react-virtualized framework which is good at efficiently rendering large lists and tabular data [1].

A rendering issue raised from https://bugzilla.mozilla.org/show_bug.cgi?id=1308441#c113 after adapting react-virtualized in our code. However, it's not only happened for us, but also an existing public issue for react-virtualized community [2]

We noticed transitory blank appears obviously during scrolling in a large amount of data, but the issue goes away if we pref off APZ by `layers.async-pan-zoom.enable` in about:config. We can see scrolling is not that smoother without APZ but user experience looks good. As a result, we cannot ship bug 1308441 at the moment due to the poor user experience of transitory blank when APZ enabled.

Some sort of web frameworks are trying to do things like react-virtualized to improve large data rendering, trying not to render entire DOM elements at the beginning. Instead, it merely render the visible element in table or list container to speed up the performance.

React-virtualized table component support overscanRowCount property to adjust the number of rows to render above/below the visible bounds of the list. [3]

Hi kats, do you have any idea about this? Not sure how hard is this issue. Or maybe a workaround would be to provide a way to disable APZ only for some document?

Thanks!

[1] https://github.com/bvaughn/react-virtualized
[2] https://github.com/bvaughn/react-virtualized/issues/518#issuecomment-281220155
[3] https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md

Comment 1

[Ricky Chien [:rickychien] (inactive)]

Here is an example https://bvaughn.github.io/react-virtualized/#/components/Grid

Comment 2

[Kartikaya Gupta (email:[e-mail])]

The approach we're planning to solving these kinds of problems is to expose the displayport via some API to JS, so that the virtualized-content-drawing code can fill in the displayport instead of the just the (smaller) viewport area. That way checkerboarding will happen less frequently. Although we don't have an actual ETA for having this implemented, there are more and more things popping up that would benefit from this, so I'd like to get it done sooner rather than later.

Comment 3

[[e-mail]]

Have similar blank during drag&scroll issue while evaluating this list library https://bvaughn.github.io/react-virtualized/#/components/List

Issue disapeared after disable `layers.async-pan-zoom.enabled` and restart

Comment 4

[Peter Chang[:pchang]]

Fred, for the blank, it's expected behavior to see blank with APZ enabled. 

After discussion with Ricky, frontend doesn't prefer using custom API for FF only. From comment 0, the react-virtualized framework will change the dom elements quite frequently during scrolling. If we are able to detect this behavior(dome tree changes with scrolling) during dom elements, we probably can disable the APZ at that time.