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.
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?
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.
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.
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.
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?
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
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.
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.
