fix(tabs): blurry text in scrolled header on some browsers (#14303)

Rounds the `transform` value when scrolling a paginated tab header, in order to avoid blurriness in some browsers.

Author: crisbeto

src/lib/tabs/tab-header.ts

@@ -338,7 +338,9 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
     // seems to cause flickering and overflow in Internet Explorer. For example, the ink bar
     // and ripples will exceed the boundaries of the visible tab bar.
     // See: https://github.com/angular/material2/issues/10276
-    this._tabList.nativeElement.style.transform = `translateX(${translateX}px)`;
+    // We round the `transform` here, because transforms with sub-pixel precision cause some
+    // browsers to blur the content of the element.
+    this._tabList.nativeElement.style.transform = `translateX(${Math.round(translateX)}px)`;
 
     // Setting the `transform` on IE will change the scroll offset of the parent, causing the
     // position to be thrown off in some cases. We have to reset it ourselves to ensure that