fix(grid): filtering row mask when tabbing is misaligned (#17180)

Author: simeonoff

projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss

@@ -6,8 +6,8 @@
 
 @mixin _filtering-scroll-mask($theme, $dir) {
     display: block;
-    position: absolute;
-    width: rem(10px);
+    position: sticky;
+    min-width: rem(10px);
     content: '';
     inset-block: rem(-2px);
     background: linear-gradient(to #{$dir}, var-get($theme, 'filtering-row-background'), transparent);
@@ -2527,9 +2527,6 @@
                 igx-icon {
                     position: absolute;
                     inset-inline-start: rem(12px);
-                    // IE fix for vertical alignment
-                    top: 50%;
-                    transform: translateY(-50%);
                 }
 
                 span {
@@ -2555,13 +2552,15 @@
     .igx-grid__filtering-row-scroll-start + .igx-grid__filtering-row-main {
         &::before {
             @include _filtering-scroll-mask($theme, right);
+
             inset-inline-start: 0;
             pointer-events: none;
             z-index: 1;
         }
 
         &::after {
             @include _filtering-scroll-mask($theme, left);
+
             inset-inline-end: 0;
             pointer-events: none;
             z-index: 1;