React-map-gl: popup text is blurry

[lolcookie]

I noticed that when you use popups the text is blurry, this is even noticeable on
https://uber.github.io/react-map-gl/#/Examples/markers-popups

Is this fixable at all?

[xintongxia]

From my observation, it it not blurry, as shown above. Or are you considering this blurry?

[lolcookie]

This may only be an issue with low dpi displays 🤔

[rilexus]

I have the same issue

[pzi]

See related issue and potential solution on the Mapbox repo: https://github.com/mapbox/mapbox-gl-js/pull/3258

[heygrady]

The problem is here: https://github.com/uber/react-map-gl/blob/master/src/components/popup.js#L141-L142

// this would greatly improve the issue
const style = {
      position: 'absolute',
      transform: `
        translate(${-anchorPosition.x * 100}%, ${-anchorPosition.y * 100}%)
        translate(${Math.round(left)}px, ${Math.round(top)}px)
      `,
      display: undefined,
      zIndex: undefined
    };

The core issue is positioning on decimal pixels. If you are on an older laptop (like a 2012 MacBook Air) you will have a 1x display, so half-pixels cause a huge problem. But even on brand new laptops that have 2x and 3x displays the partial pixels will cause the overlays to look blurry.

To "really" fix the issue you'd need to know the offsetHeight and offsetWidth as well as the window.devicePixelRatio to determine if the transform would cause the element to be rendered "blurry".

const pixelRatio = window.devicePixelRatio || 1

const crispPixel = (size) => Math.round(size * pixelRatio) / pixelRatio

const crispPercentage = (el, percentage, dimension = 'width') => {
  const origSize = dimension === 'width' ? el.offsetWidth : el.offsetHeight
  return (crispPixel(percentage / 100 * origSize) / origSize) * 100
}

const el = this._containerRef.current

const style = {
      position: 'absolute',
      transform: `
        translate(${crispPercentage(el, -anchorPosition.x * 100)}%, ${crispPercentage(el, -anchorPosition.y * 100, 'height')}%)
        translate(${crispPixel(left)}px, ${crispPixel(top)}px)
      `,
      display: undefined,
      zIndex: undefined
    };

[Pessimistress]

@heygrady Thank you. Would you open a PR with this fix?