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.

[jelbourn]

@crisbeto getting reports that this is still a problem at non-default zoom levels. I'll ask people to provide more details if necessary.

[crisbeto]

It would be nice to get some more details since I can't think of anything else, off the top of my head that would cause the content to be blurry.

[takamori]

I noted at #14283 (comment) that the original steps repro this still, and alur@ noted that the usage of translate3d is the cause. Can you clarify what details would be helpful here?

[crisbeto]

I managed to reproduce it now. I think that my Chrome might have been out of date the last time I tried to reproduce it.

[crisbeto]

Closing since this looks like a browser issue, rather than something we can fix on our end (see the discussion on #15695).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}