Column resizer top position is incorrect when igx-grid is rendered inside a Shadow DOM context

[Zneeky]

Description

When using igx-grid inside a component with ViewEncapsulation.ShadowDom for example, the column resize line does not align properly with the header cell during resize.

This is caused by incorrect calculation of the top position in IgxColumnResizerDirective, where event.target.getBoundingClientRect() is used. Inside a Shadow DOM context, event.target refers to the shadow host (due to event retargeting), not the actual internal element that was interacted with.

• igniteui-angular version: any
• browser: any

Steps to reproduce

1. Create a component with:

      encapsulation: ViewEncapsulation.ShadowDom 

2. Inside its template:

• Add an <igx-grid>
  

• Add some columns with [resizable]="true"
  

• Optionally add <igx-grid-toolbar>
  

3. In the component’s styles, explicitly include Ignite UI styles again since Shadow DOM encapsulation blocks global styles

Here is a StackBlitz sample where the issue is reproduced

Result

The resizer line appears misaligned, often higher than the actual column header.

Expected result

The resizer line should align with the top of the header cell.

Attachments

StackBlitz