content in a drag drop component becomes blurry at non-default zoom on linux

[mtaran-google]

Bug, feature request, or proposal:

Bug

What are the steps to reproduce?

1. open https://material.angular.io/cdk/drag-drop/overview on chrome 70+ on linux
2. zoom to 110%
3. drag the box in the first example around and notice that sometimes it's blurry (it should never get blurry)

The blurriness becomes more frequent/easier to spot if you change the font in the dialog box to 13px (it's at 14px by default). Still, it varies depending on the exact dragged spot, making me think this could be due to some sort of aliasing issue with how the position is set while dragging.

I'm told this also happens at lower and higher zoom levels (though things look fine at 100%).

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Affected: Linux, Chrome 70
Not affected: Chrome OS,

Is there anything else we should know?

Original internal issue for reference b/120034512

[takamori]

Looks like this is still happening on Chrome 73.0.3683.75 on Linux using the originally-filed steps. Seems like zooming is the key factor; it seems that the fix in #14299 assumes that there is no browser zoom applied. For instance- if a 110% browser zoom is applied, ensuring that the translate3d() transform has values that are divisible by 10px will ensure that no blurriness occurs.

[takamori]

(and actually, not just on Linux, when browser zoom is applied - repro's just as easily on CrOS)

[alur]

It's because the element is moved with translate3d. Moving it with just translate works without blur.