Grid cells misalignment when there are Multi-column headers' child columns with % width

[ddaribo]

Description

Related to #13392. This was fixed for the column headers, however, a slight misalignment is still present for the cells. This can be observed when activating a cell, or for cells having borders:

• igniteui-angular version: 16.1.x, 16.0.x, 15.1.x
• browser: any

Steps to reproduce

1. Open this sample.
2. Click on the "ContactName" column -> "Maria Anders" cell to activate it, so that it has a border.

Result

The cell is not aligned to the parent header. For instance, if the parent's width is 205 px, the cell's width is not rounded and is 205.19 px

Expected result

Proper alignment

Attachments

[ddaribo]

As discussed with @dkamburov, an easy fix would allow a parent column group’s width to be float (as mentioned in issue #13392 description).

So, there are two options:

1. Allow float width for column groups. However, this should be tested across all browsers, as there might be browser-specific rounding behaviors (specifically Safari, as I noticed no difference in Chrome, Mozilla & Edge).
   Additionally, this would require several tests expectations to be edited to expect non-rounded values for column groups' headers, which I believe is not the best practice.

2. Round all widths to integers, including the cells. Currently all grids (tree, hierarchical, pivot) cells are sized with the following bindings:

        [style.min-width]="col.width"
        [style.max-width]="col.width"
        [style.flex-basis]="col.width"
        [width]="col.getCellWidth()"

,where col.width is the string value set on a column, such as [width]=”’30px’” or [width]="'333.33px'". This implementation sets the width as-is, resulting in float widths of cells.

On the other hand, in many places, when calculating values such as the grid's totalWidth (here) , the pinnedWidth (here), the columns' widths are parsed to int. IMO, this appears inconsistent, given that float column widths are allowed and are produced. Additionally, all tests check against int values. Also leaving int widths would avoid potential issues in case different browsers indeed render them differently.
This makes option 2) more preferable?

[hanastasov]

As discussed with @dkamburov, an easy fix would allow a parent column group’s width to be float (as mentioned in issue #13392 description).

So, there are two options:

1. Allow float width for column groups. However, this should be tested across all browsers, as there might be browser-specific rounding behaviors (specifically Safari, as I noticed no difference in Chrome, Mozilla & Edge).
   Additionally, this would require several tests expectations to be edited to expect non-rounded values for column groups' headers, which I believe is not the best practice.
2. Round all widths to integers, including the cells. Currently all grids (tree, hierarchical, pivot) cells are sized with the following bindings:

        [style.min-width]="col.width"
        [style.max-width]="col.width"
        [style.flex-basis]="col.width"
        [width]="col.getCellWidth()"

,where col.width is the string value set on a column, such as [width]=”’30px’” or [width]="'333.33px'". This implementation sets the width as-is, resulting in float widths of cells.

On the other hand, in many places, when calculating values such as the grid's totalWidth (here) , the pinnedWidth (here), the columns' widths are parsed to int. IMO, this appears inconsistent, given that float column widths are allowed and are produced. Additionally, all tests check against int values. Also leaving int widths would avoid potential issues in case different browsers indeed render them differently. This makes option 2) more preferable?

Nice and detailed explanation.

Option 2# sounds better to me. Does option #2 means that one can set column width to "295.5px", but column.width would return an integer 290?

P.S. I saw the PR that it is a new hidden getter returning the resolvedWidth, so it answer my question :)