Popup text with dynamic content is blurry

[joric]

maptalks's version and what browser you use?

maptalks-gl v0.105.4
chrome

Issue description

Popups become blurry when I resize content, e.g. toggle a section. I guess it depends solely on popup size.

before toggle:

<div id="popup" class="popup" style="position: absolute; left: 0px; top: 0px; transform: translate3d(848.317px, 249.079px, 0px) scale(1); transform-origin: 325.742px bottom; z-index: 0;">

after toggle:

<div id="popup" class="popup" style="position: absolute; left: 0px; top: 0px; transform: translate3d(652.575px, 33.2037px, 0px) scale(1); transform-origin: 325.742px bottom; z-index: 0;">

It doesn't ALWAYS happen but it's pretty common, e.g. 1/2 of all windows.

It is not fixable with css (tried a bunch of properties, none helped).

When I set translate3d coordinates (in chrome console) to round it fixes the issue. Can we add rounding to translate3d?

Please provide a reproduction URL (on any jsfiddle like site)

The example is here https://joric.github.io/stalker/

Upd. I had to use this as a temporal solution (large containers are not very phone friendly anyway). Small popups not affected:

#popup-data{
  font-size: 14px;
  font-family: monospace;
  max-width: 360px; /* <-- here */
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

Fractional translate3d somehow doesn't blur small popups but blurs larger ones. Integer translate3d works.

Other divs (maptalks-wrapper/maptalks-front) already use integer translate3d so maybe it should be integer everywhere.

[joric]

Yeah that fixed the blurry popup. I can't really build the master there are always build issues (last time it was something about the video module) so I had to fix the CDN version inplace. This particular fixed version is here, its only a few characters different from CDN https://github.com/joric/stalker/blob/7e543b583134fe7e64f3282a0baa86831b0efae5/js/lib/maptalks-gl/maptalks-gl.js