mapbox / mapbox/mapbox-gl-js

`icon-text-fit-padding` produces inconsistent pixel padding

Open
#8,476 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug :lady_beetle: cross-platform :tv:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

I'm using two icons that are identical in dimensions. Here's an example of the first:

```svg

```

On duplicate layers to create an outline effect by setting the `icon-text-fit-padding` values to be 1 pixel larger than the second . But the pixels appear inconsistent in cases

Screen Shot 2019-07-15 at 6 42 36 AM

---

**mapbox-gl-js version**: `v1.1.0`
**browser**: `Google Chrome Version 74.0.3729.169 (Official Build) (64-bit)`

### Expected behavior

I would expect the value of `icon-text-fit-padding` in the first layer to be evenly padded by 1 additional pixels

### Link to Demonstration

https://jsfiddle.net/s1fxmvn2/embedded/result/?username=tristen

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the inconsistent padding in the linked JSFiddle using mapbox-gl-js v1.1.0 and the duplicate icon layers described in the issue. Trace the implementation of `icon-text-fit-padding` from that example and compare the rendered pixels for identical icons. Done means a one-pixel increase produces even padding in the reported cases, with coverage for the regression.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.