fix(tabs): fix scrolling issue

Author: zhosti

projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -280,12 +280,12 @@
     %tabs-header-content {
         flex: 1 1 auto;
         overflow: hidden;
+        scroll-behavior: smooth;
     }
 
     %tabs-header-wrapper {
         position: relative;
         flex-grow: 1;
-        transition: transform .2s $tabs-animation-function;
 
         @if $bootstrap-theme or $indigo-theme {
             &::after {

projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.ts

@@ -239,7 +239,7 @@ export class IgxTabsComponent extends IgxTabsDirective implements AfterViewInit,
                     break;
                 }
             } else {
-                if (element.offsetWidth + element.offsetLeft >= this.offset) {
+                if (element.offsetWidth + element.offsetLeft >= this.offset - 1) {
                     this.scrollElement(element, scrollRight);
                     break;
                 }
@@ -251,7 +251,7 @@ export class IgxTabsComponent extends IgxTabsDirective implements AfterViewInit,
         const viewPortWidth = this.viewPort.nativeElement.offsetWidth;
 
         this.offset = (scrollRight) ? element.offsetWidth + element.offsetLeft - viewPortWidth : element.offsetLeft;
-        this.itemsWrapper.nativeElement.style.transform = `translate(${-this.offset}px)`;
+        this.viewPort.nativeElement.scrollLeft = this.offset;
         this.updateScrollButtons();
     }