Blurred markers and popups when changing container size through scale transform

[alejandroiglesias]

mapbox-gl-js version: 0.38.0

Steps to Trigger Behavior

1. Open this fiddle. You should see a map rendered inside a container that is scaled down through a CSS transform.
2. Click the "Expand map" button.

Expected Behavior

After calling Map#resize(), the marker and the popup look sharp.

Actual Behavior

After calling Map#resize(), the marker and the popup still look blurred.

Additional info

If you click the "Toggle map" button twice you'll see that the marker and popup look sharp now. Sadly, this is not an option for us since our architecture is more complex (the #map is actually rendered inside an iframe) and we would like to avoid hacks that we don't understand how/why they work.

[mollymerp]

Hi @alejandroiglesias – thanks for using mapbox. I believe this is an issue with webkit's implementation of CSS scaling – your fiddle in firefox does not appear blurry.

Also you'll notice the same affect for all DOM elements, not just those associated with a mapbox-gl-js map. https://jsfiddle.net/k4wk16gu/ Closing this ticket because I don't think its actionable for gl-js.

[alejandroiglesias]

@mollymerp thanks for your reply! I see what you mean. The reason I thought it was related to MapboxGL is that the only elements being blurred are the map markers and popups. All other elements look fine (what we actually scale in our app is an iframe with other contents besides the map).

[andrewharvey]

see also #3249

[kiprou]

Lol, 6 years later and still experiencing blurry markers in Chrome.

For me, the problem is triggered by a combination of modifying a marker's width/height, and scroll-wheel zooming. If I do both these things, pixel-alignment will be lost. I can never predict exactly at which zoom event it will be lost, but once it is, it very rarely corrects itself on its own. To be honest it feels like Chrome is confused, because for a split second after zooming everything will look sharp, as it should, and then the blur will kick in for no apparent reason. It's the exact opposite of what should be happening.

Curiously, using Mapbox's GUI navigation controls to zoom doesn't result in a loss of pixel-alignment. Based on this, I tried quantizing the zoom levels in my app to mimic the GUI when using scroll-wheel, but strangely this didn't help.

The only reliable method I've found for restoring (and maintaining) pixel-alignment is toggling the CSS display property off/on for each marker, which I do at the end of each zoom:

map.on('zoomend', function() {
    let markers = document.querySelectorAll('.mapboxgl-marker.custom-marker');
    markers.forEach(function(marker) {
      marker.style.display = 'none';
      marker.style.display = 'flex';
    });
  });

I don't know why this works, probably repaint/reflow related. Bit of a performance killer I'd imagine. If anyone has discovered a better solution in the last half a decade I'd love to hear it!

[rmcf]

Unfortunately the same problem – blurred MapLibre GL default markers in Google Chrome:

const marker = new maplibregl.Marker({ color: "#1976d2" })

maplibre-gl: ^4.1.2
Google Chrome: 124.0.6367.60