Skip to content

Commit 669127e

Browse files
committed
fix(select): panel content blurry in some browsers
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.
1 parent abc3d38 commit 669127e

File tree

1 file changed

+7
-6
lines changed

1 file changed

+7
-6
lines changed

src/lib/select/select.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1085,8 +1085,9 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
10851085
}
10861086

10871087
// Set the offset directly in order to avoid having to go through change detection and
1088-
// potentially triggering "changed after it was checked" errors.
1089-
this.overlayDir.offsetX = offsetX;
1088+
// potentially triggering "changed after it was checked" errors. Round the value to avoid
1089+
// blurry content in some browsers.
1090+
this.overlayDir.offsetX = Math.round(offsetX);
10901091
this.overlayDir.overlayRef.updatePosition();
10911092
}
10921093

@@ -1130,10 +1131,10 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
11301131
optionOffsetFromPanelTop = scrollBuffer - itemHeight / 2;
11311132
}
11321133

1133-
// The final offset is the option's offset from the top, adjusted for the height
1134-
// difference, multiplied by -1 to ensure that the overlay moves in the correct
1135-
// direction up the page.
1136-
return optionOffsetFromPanelTop * -1 - optionHeightAdjustment;
1134+
// The final offset is the option's offset from the top, adjusted for the height difference,
1135+
// multiplied by -1 to ensure that the overlay moves in the correct direction up the page.
1136+
// The value is rounded to prevent some browsers from blurring the content.
1137+
return Math.round(optionOffsetFromPanelTop * -1 - optionHeightAdjustment);
11371138
}
11381139

11391140
/**

0 commit comments

Comments
 (0)