[GH #1800] Disabling sync scroll feature

Tags: #<Tag:0x00007f8b1adc3a00> #<Tag:0x00007f8b1adc38c0>
#1

Dear Support Team,

We currently utilise Handsontable to render a million+ rows; overall, it has performed well. However, we have encountered a specific issue that we believe is impacting performance in certain scenarios.

The problem arises when scrolling on Mac or 4k displays, where it seems that Handsontable attempts to sync the scroll, leading to noticeable lag. While we have tested the application on various displays and observed satisfactory performance when the scroll doesn’t sync with the header or row header, the challenge arises when using Mac or 4k displays.

Upon investigating the code, we discovered that Handsontable triggers scroll synchronisation when window.devicePixelRatio > 1 . Currently, we have deactivated it by setting window.devicePixelRatio = 1 . However, this has some potential conflicts with other libraries.

Our primary inquiry is whether there is a way to disable the sync scroll feature in Handsontable.

Best,

#2

Hi @ben1

Thank you for contacting us and detailed report. This behavior can’t be modified through our API, so the method you are currently using is probably the best workardound for this issue. Do you have any video recording showing the problem?

#3

We are embedding Google Maps into our application. We we do window.devicePixelRatio > 1 the maps gets blurred.
Look at the image below; on the left side you will see map when window.devicePixelRatio > 1, and you will see the map without it on the right.

58
Screenshot 2024-03-05 at 20.11.58.jpg2226×704 436 KB

This will never be passed by our QA department, so we need a solution that is not applied globally.
Looking forward to any help that you can offer for this issue.

#4

Hi @ben1

I will need a basic example with the confugiration where the issue is replicable to determine what else can be done to avoid the behavior. Please prepare one in the sandbox of your choice.

#5

Have a look at this sandbox: sandbox

We are using handsonTable inside our nuvo importer. Inside nuvo, we do window.devicePixelRatio > 1 to disable sync scroll.

However, you can see that the maps are blurred out because of it.

#6

Hi @ben1

Thank you for the example. I’ll take a look at it and get back to you soon.

#7

Hi @ben1

I wanted to check the example you sent me, but it’s not available. Can you please check the access to it?

#8

hi @adrian.szymanski,

Sorry, my bad. I have updated the link in my previous message.

#9

@ben1

Thank you, it works now and I can see the blurred map labels. However, you mentioned that this value window.devicePixelRatio > 1 is set within Handsontable itself, but I can’t find it anywhere in our codebase. Can you please tell where did you find it?

#10

We have used window.devicePixelRatio > 1 inside the nuvo importer embedded next to the Google map(inside the sandbox).

Our nuvo importer uses handsonTable. To ensure the scroll is smooth for handsonTable (without lag) on Mac or 4k displays, we enforce window.devicePixelRatio.

My question is, Can we somehow set this setting inside the handsonTable configuration, which allows us to disable the sync scroll? because if we do it, it would be applied globally, and it would affect other things as well (for eg: google map).

Alternatively, if you guys can improve the scroll performance for Mac or 4k displays then we won’t need to override the devicePixelRatio.

Below I am attaching the link for two videos. The first one is without overriding devicePixelRatio, and the second one is after overriding devicePixelRatio. You can see how the scroll behaviour is affected.

Without overriding window.devicePixelRatio
video
After overriding window.devicePixelRatio
video

#11

Hi @ben1

Thank you for more details. I have discussed it internally, and it seems that the only workaround we can propose for now is to set preventWheel to true, which is disabled by default. Please, let me know if that helped in your case.

#12

Hey,

Thanks for sharing this. We have tried setting the preventWheel to true but unfortunately It doesn’t work.

You can have a look at this video below: https://www.loom.com/share/4f97f65d1b5a47c1b10eca543fc7d228

#13

Hi @ben1

Thank you for the update. In this case we will have to look deeper into this issue. I reported it internally for further investigation by our developers. I’ll update you when I’ll have more information on it.

#14

Hi, any updates on this ?

#15

Hi @ben1

Sorry, but not yet. Our backlog is full at the moment. I will let you know when we start working on it.