Artifacts on the symbol layer when the window containing the map is moved to a secondary monitor

[BogdanMarginean12]

Hello,

I noticed that the symbol layer on the map exhibits noticeable artifacts/jagged edges that resemble downscaling issues when the window that contains the map is moved to a secondary monitor.

The issue can be repro-ed with the sample page:
https://docs.mapbox.com/mapbox-gl-js/example/add-image/

Open it up on the main (laptop) screen, move it to secondary.

The main screen in my case is a 16" MBP (M2 Pro), the secondary screen is an older 1080p benq xl2411z but I've seen the issue on various types of monitors and it seems to also happen on windows laptops. I can repro this in both Safari and Chrome.

Refreshing the window on the secondary screen does not seem to fix the issue which means that any new tab opened on the secondary monitor will have the artifacts.

I tried to enable antialias locally (it's not enabled in the sample) but it does not improve the appearance in this case.

The cat on the main screen:

The cat on the secondary screen:

Let me know if I'm doing something wrong or if this is a known issue, I haven't found anything related in the repo.

Thanks!