Column resize line not positioned correctly when zoom or scale is applied in igx-grid

[georgianastasov]

Description

When applying a zoom (using the CSS zoom property) or a scale transformation (using transform: scale()) to the parent container or directly to the igx-grid, the column resize line does not appear in the correct position. This issue occurs when the zoom is set below 100% or when the scale is changed.

• igniteui-angular version: master, 18.1, 17.2
• browser: all

Steps to reproduce

1. Go to this sample:
   https://stackblitz.com/edit/5kqdbm?file=src%2Fapp%2Fgrid%2Fgrid-column-hiding-toolbar-sample%2Fgrid-column-hiding-toolbar-sample.component.html
2. Apply different zoom levels (50%, 60%, 70%, etc.) using the provided buttons.
3. Apply different scale levels using the provided buttons.
4. Try resizing a column by dragging the resize handle.

Result

The column resize line does not show in the correct position and is misaligned when the zoom or scale is applied.

Expected result

The column resize line should remain aligned with the columns regardless of zoom or scale settings, ensuring a consistent and accurate resizing experience.

Attachments