fix(select): panel content blurry in some browsers (#11434)

After we switched everything over to the `FlexibleConnectedPositionStrategy`, we started using `transform` to handle overlay offsets, however using a subpixel `transform` value will cause some browsers to blur the content of the element. These changes round the select's transforms so the content isn't blurry.

Author: crisbeto

src/lib/select/select.spec.ts

@@ -2833,7 +2833,9 @@ describe('MatSelect', () => {
       const rawYOrigin = selectInstance._transformOrigin.split(' ')[1].trim();
       const origin = Math.floor(parseInt(rawYOrigin));
 
-      expect(origin).toBe(expectedOrigin,
+      // Because the origin depends on the Y axis offset, we also have to
+      // round down and check that the difference is within a pixel.
+      expect(Math.abs(expectedOrigin - origin) < 2).toBe(true,
           `Expected panel animation to originate in the center of option ${index}.`);
     }
 

src/lib/select/select.ts

@@ -1085,8 +1085,9 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     }
 
     // Set the offset directly in order to avoid having to go through change detection and
-    // potentially triggering "changed after it was checked" errors.
-    this.overlayDir.offsetX = offsetX;
+    // potentially triggering "changed after it was checked" errors. Round the value to avoid
+    // blurry content in some browsers.
+    this.overlayDir.offsetX = Math.round(offsetX);
     this.overlayDir.overlayRef.updatePosition();
   }
 
@@ -1130,10 +1131,10 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
       optionOffsetFromPanelTop = scrollBuffer - itemHeight / 2;
     }
 
-    // The final offset is the option's offset from the top, adjusted for the height
-    // difference, multiplied by -1 to ensure that the overlay moves in the correct
-    // direction up the page.
-    return optionOffsetFromPanelTop * -1 - optionHeightAdjustment;
+    // The final offset is the option's offset from the top, adjusted for the height difference,
+    // multiplied by -1 to ensure that the overlay moves in the correct direction up the page.
+    // The value is rounded to prevent some browsers from blurring the content.
+    return Math.round(optionOffsetFromPanelTop * -1 - optionHeightAdjustment);
   }
 
   /**