Scrolling in Firefox causes rendering issues for the table

Tags: #<Tag:0x00007efc64602568>
#1

Hi,

I am facing some issue when implementing Handsontable for Firefox, when scrolling, this error is returned from the console:

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

The table renders fine initially, but when scrolling horizontally or vertically, the table will bug out and most of the table won’t be visible.

image
image.png1664×441 1.59 KB

Thank you!

Prakoso

#2

Hi @prakoso.santoso

that link is no longer valid. However, I have found a similar issue report here https://stackoverflow.com/questions/37098306/this-site-appears-to-use-a-scroll-linked-positioning-effect-this-may-not-work

So I suppose you are also using transform property in your table. The use of this property is reported in a regression report here https://github.com/handsontable/handsontable/issues/6201 for v7 of Handsontable. Here is an example https://jsfiddle.net/handsoncode/mjec9L0t/ where we see that the rotation is fine but scale misaligns some elements.

Can you share your CSS properties for the Handsontable element?

#3

Hi Aleksandra,

Thank you for your prompt response.

I have read the details of the issue from the link you have sent. I don’t think the cause of this issue is the same as the reported one on GitHub, I have done a scan on the DOM and found that there’s no direct parent / ancestor element above the Handsontable div that has a transform CSS attribute.

The CSS for the Handsontable element is the default, I haven’t customized any CSS relating to it.

Could there be another cause for this issue?

Thank you!

#4

Would you be interested in a short screen-sharing session, @prakoso.santoso ? It will be easier to find the cause while debugging the code together. If so, please send me an email to support@handsontable.com providing your timezone.

#5

Hi Aleksandra,

Thank you, I have sent the email.

#6

Hi Aleksandra,

Just an update on the issue, we have followed your advice and set a fixed height that is responsive to the containing div of the table component, and this fixed the issue.

Thank you for your help!

Prakoso

#7

Thank you for the update. I’m glad to hear that the issue is gone.

#8