Icon-image incorrect scaling in combination with text-size stops property

[sienki-jenki]

mapbox-gl-js version: 2.7.1

browser: Google Chrome Version 99.0.4844.84 (Official Build) (x86_64)

Steps to Trigger Behavior

Use symbol with icon-image and text-size:{ stops: [...] } and watch behaviour of scaling image behind text when zoom level is going from one integer to another, so for example 3.98 -> 4.01.

Link to Demonstration

https://codepen.io/sienki-jenki/pen/MWrVwav

Expected Behavior

Smooth/correct width calculation for image behind text.

Actual Behavior

Width of image is changing "drastically".

Zoom 3.98:

Zoom 4.01:

Take a look at distance between left black border of image and first letter F and last letter R and black border on right side. There is too much space on zoom 4.01. (This zoom level is just an example, it appears on every jump from one integer to another.)

From what I checked in code, I can see that fontScale calculated as fontScale = layoutTextSize / glyphSize in src/symbol/symbol_layout.js on line 392 is different on every zoom level, which makes sense, but it's only re-calculated on every zoom integer change. I'm guessing that the problem is not re-calculating image often enough and there is no synchronization between calculated fontScale in symbol_layout.js and real font size (real, meaning what we see on map) that is being calculated using text-size:{ stops: [...] }

I understand that this might be pretty expensive to calculate width/height of image on every zoom level change, but maybe it would be possible to set some zoom delta of how often such re-calculation should be made, therefore it could be adjusted for user needs.

[sienki-jenki]

To addition to that, it's more visible when font-sizes in stops are greater. 3.00 ZOOM: 2.97 ZOOM: