Jerky scrolling when responsive layout set to collapsed (mobile and desktop)

[flexphperia]

Describe the bug When scrolling on mobile devices the table with responsiveLayout option set to "collapse" behaves incorrectly. Rows are jumping, and scrolling is jerky. The problem also occurs on desktop devices.

Tabulator Info 4.4

Working Example http://tabulator.info/examples/4.4#responsive-layout-collapse

To Reproduce A step by step guide to recreate the issue in your JS Fiddle or Codepen:

1. Go to http://tabulator.info/examples/4.4#responsive-layout-collapse
2. Scroll down slowly up and down

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version latest

Smartphone (please complete the following information):

• OS: Android
• Browser: Chrome, Firefox
• Version: latest

[olifolkerd]

Hey @flexphperia

Thanks for bringing that up, that definitely looks like a bug, I will look at getting a patch in for the next release.

Cheers

Oli :)

[ttraguth]

Hi folks,

we also see some strange behaviour when scroller large lists in nested views. While data is loaded asynchronously the scrolling stops at a certain point (especially in older Browsers). Also on Chrome the rendering of the large list appears jerky.

Any news on this? A fix would be higly appreciated.

Thanks and cheers.

[flexphperia]

Are there any news with this? Tabulator is unusable on mobile with this bug

[BryceBarbara]

I agree, this is incredibly frustrating to deal with. Can the title be updated to make it clear that this is really whenever virtualDom is true?

You know what, I went ahead and did some investigating and the cause of the bug seems to be from the assumption that the code can remove all rows and add them back before the browser notices that the scrolling element's height has changed. You can see this in the RowManager._virtualRenderFill function.

I was able to come up with a hacky fix which is to set the element's height explicitly right before removing all elements then clearing the property once we've added the children back.

[olifolkerd]

Hey @BryceBarbara

This has nothing to do with the _virtualRenderFill function or any assumption that a browser can redarw the rows in time.

the _virtualRenderFill function is only called on initial table load and when a scroll bar is moved so fast that it exceeds the window scroll buffer, at which point only the visible buffer rows are redrawn not the whole table.

The issue arises because the layout collapse mode causes the row height to be adjusted outside of the normal tolerance of the rows height, but this change in height is not sent through to the virtual DOM so it over compensates when it draws/removes which is what leads to the jerky motion.

It is on the list to fix, there are a lot of competing needs between the users and i will get round to it when i get a chance.

If you are using a variable height table and you feel that the _virtualRenderFill function is being called more often than described above, that suggests that the way your table has been setup with its containing element may be at fault and resulting in a resize/redraw feedback loop, if you post a link to a JS fiddle that replicates your table setup i may be able to advice a different configuration that will not cause the issue.

Cheers

Oli :)

[BryceBarbara]

I'm actually not even using responsiveLayout:"collapse" and seeing the buggy scroll behavior.

Here's a recording of it in my setup:

And here's a recording of it happening on the docs page in the section that also doesn't contain resposiveLayout:

I was able to prevent that behavior with this workaround:

const originalMethod = someTabulatorInstance.rowManager._virtualRenderFill;
someTabulatorInstance.rowManager._virtualRenderFill = function() {
  const container = this.tableElement;
  if (!container) return originalMethod.call(this, ...arguments);
  container.style.minHeight = container.scrollHeight + "px";
  const response = originalMethod.call(this, ...arguments);
  container.style.minHeight = null;
  return response;
}

Sneaky edit: Oh and I wanted to say thanks for the quick response and fantastic library Oli! Even with this hiccup, this library is leagues ahead of others and I'm very glad it exists :)

[olifolkerd]

Hey @BryceBarbara

Thanks for the kind words, it is great to hear people are enjoying using Tabulator.

If you are generally experiencing jerky scrolling then that is completely unrelated to this issue, this is a very specific case.

Can i ask what browser you are using, the only browser that would usually experience that sort of jerkyness would be IE, i have used it on a wide variety of browsers and devices and do not experience the jerkyness you are experiencing, on all machines i use it on it runs smoothly.

Could you put togeather a JS fiddle that replicates your issue, it will be much easier for me to get to the bottom of your issue if i can see it in action

Cheers

Oli :)

[BryceBarbara]

I created a new issue #2880 to avoid muddying up this issue any further. Sorry for the confusion!

[MarkoTukiainen]

Hello @olifolkerd,

Has there been any progress with this issue, or could you provide some pointers on where to look in the source code to try and fix this myself? We've integrated Tabulator to the latest version of our project, and apart from this issue, it's been great. But this jerkiness issue in scrolling (which we only noticed at the last minute) is making the UI pretty much unusable with mobile devices or otherwise narrow views.

Regards, Marko

[MarkoTukiainen]

In case this helps anyone, I was able to resolve the issue for my use case by adding the following code to Tabulator's dataLoaded event and as a window resize listener:

let rows = myTabulatorInstance.rowManager.rows
rows.forEach(function(row){
  row.calcHeight()
})

[olifolkerd]

Hey all,

This has been resolved in the 5.x releases.

Cheers

Oli :)

[flexphperia]

Issue is still not resolved even in v.5.1 Check demo page (Responsive Layout Collapsed List) on mobile and try to scroll, it's stops, jumps, etc. http://tabulator.info/examples/5.1?#responsive-layout-collapse