Unexpected colors in between borders

Tags: #<Tag:0x00007efc620b5b48>
#1

Hi,

Some of the tables implemented face this issue where the background colors from the

element gets shown in between the borders. It’s a bit faint so please click into the screenshot to have a clearer view, however, on the application it is quite obvious.

without_borders
without_borders.PNG963×692 76.6 KB

To make this clearer, I’ve set the background color of the

element to red which shows the lines in between all the cells that ideally shouldn’t be there. I’ve also made sure that any custom border style that we assigned to each individual cell didn’t cause this.

with_borders
with_borders.PNG1066×749 17.4 KB

In a table that is not affected by this issue, the action of setting the background of all

elements in the table as red does not affect the overall look of the table.

This is sometimes resolved by zooming and unzooming back to the original scale, any ideas?

Thank you.

#2

Hi @prakoso.santoso
Thank you for your reporting. However, without a working demo with configuration causing the issue, we are not able to help.
Would you mind to fork the following jsfiddle to share your configuration (without data): https://jsfiddle.net/Lvabe0r9/?

#3

Hi Piotr,

I think I may have found the cause, it is relating to the transform property in the parent element holding the table. But I am not sure why it is so.

Some background information about this issue, I am using the table in a modal, which allows the user to reposition the modal using the transform property. I realize that this issue only happens when the translate x and y values in the transform property is using non-whole numbers. If you were to tweak the translate values in the modal class to use whole numbers, it seems fine.

Here is the fiddle:

https://jsfiddle.net/p5feqhn0

Any ideas?

#4

Thank you for sharing the simplified demo @prakoso.santoso

Handsontable does not work well with CSS transform. We have been reported

  • wrong selection under transform: rotate
  • excess headers for transform: scale

and as you spotted additional header borders for transform: translate.
I have reported the issue here https://github.com/handsontable/handsontable/issues/8696 and will update you one we fix it.

#5

Hi @aleksandra_budnik,

Thank you for the information, and in the meantime we might need to find another workaround as our application is going to be released to our customers for beta testing soon.

#6

I’m sharing up update after investigation on this topic: https://github.com/handsontable/handsontable/issues/8696

#7