text-max-width is not correctly enforced
Open
Nobody has claimed this yet.
- #11094 by @zmiao — closed without merging
bug :lady_beetle:
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
mapbox-gl-js version: v2.5.0
browser: Firefox v92.0.1 (MacOS v11.6)
Steps to Trigger Behavior
- Make the map div width 350px
- Add a symbol layer to a map that uses the text-max-width property & references long text data
- Set the text-max-width to the equivalent of 300px
Link to Demonstration
https://codepen.io/riastrad/pen/powXqxP
Expected Behavior
The label text should only be 300px wide, maximum - and should not extend past the width of the map div.
Actual Behavior
The label extends much further than the proscribed text-max-width, and overflows even on a map that is +50px wider than the max width.
cc/ @mapbox/gl-js
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue in the linked CodePen with mapbox-gl-js v2.5.0, Firefox, a 350px map, and text-max-width set to 300px. Compare the rendered label width with the expected maximum and verify that the overflow is resolved without extending beyond the map container.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 25/100