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

Nobody has claimed this yet.

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!

Start with the linked add-image sample page and reproduce the rendering artifacts by moving the map window between the laptop and secondary monitors in Safari and Chrome. Trace the map's symbol-layer rendering and display-density handling, then confirm the artifacts no longer appear across the reported monitor setups without degrading the main-screen rendering.

Written by the indexing model from the issue text.