Flutter Web icons look pixelated on PixelBook screen (but not external monitor)

[eseidelGoogle]

Viewing Rive 2, I see that when I load it on my external monitor (attached to pixel book) it looks fine, but on the built in screen icons look pixelated. @ferhatb asked me to file.

On main screen normal (100%) browser zoom:

On external monitor, normal (100%) browser zoom:

Main screen at 200% browser zoom:

External Monitor 200% browser zoom:

I believe Rive2 uses the CanvasKit backend?

[eseidelGoogle]

I believe this is the external monitor: https://www.asus.com/us/Monitors/VG248QE/

[yjbanov]

The pixelation looks similar to one reported in #62652 for iOS/Safari 14. Wondering if it's the same issue.

@eseidelGoogle Do you see this issue when your laptop is disconnected from the external monitor? (hypothesizing device-pixel ratio confusion when a second monitor is present).

/cc @kjlubick I suspect the fix might be on the Skia side.

[eseidelGoogle]

Here is a screen shot from my pixelbook with no external monitor and the latest build of the app. I've not restarted my pixel book.

[yjbanov]

Ok, the issue seems to be in https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/painting/image_resolution.dart. The line https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/painting/image_resolution.dart#L257 causes us to pick assets meant for lower DPR screens, which doesn't work for desktop screens that tend to have DPR <2. For example, my monitor is a quite high-resolution 5K2K display. However, with 1.25 DPR we'd pick 1x image assets and I see unpleasant looking image upscaling artifacts.

A similar issue is #44108.

I'm going to relabel this as a framework issue. /cc @goderbauer @HansMuller