Icon-image incorrect scaling in combination with text-size stops property
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
**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.
Contributor guide
Research direction
Start with the CodePen reproduction and inspect src/symbol/symbol_layout.js around line 392, where fontScale is calculated. Compare the image sizing with text-size stops as zoom crosses an integer boundary. Done means the image width changes smoothly and remains correctly aligned with the text between zoom levels.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- computer-graphics, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100