mapbox / mapbox/mapbox-gl-js

Symbol flicker when moving map by animation

Open
#7,974 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

I tried to set the viewport of the map to track a car, however I found that the symbol will flicker during the panning.
![gif](https://user-images.githubusercontent.com/16457917/53613716-eb38f580-3c11-11e9-8763-356e655f2136.gif) ![snipaste_2019-03-01_11-00-38](https://user-images.githubusercontent.com/16457917/53613724-effda980-3c11-11e9-946e-478b86e08725.jpg)

Note the symbols(both the icon and the text) highlighted. They will flicker(not mean the fadeOut and fadeIn but the slight moving around the position), and I have searched the issue, most of them are caused by the overlap for icon or text, however in this example, it looks like it is caused by the position accuracy of the symbol.

Anyway to fix that?

---------------------------

BTW, when I say `filcker` I does not mean the symbol fadeOut and fadeIn again during the airport symbol moving across them, I know this is caused by the collision between the icon and label, and that can be fixed by `icon-allow-overlap` or `text-allow-overlap`. While I mean that during the map panning, almost all the symbol in the map start to shake.

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 map viewport animation shown in the issue's GIF and observe the highlighted icons and labels while panning. Trace the symbol rendering or placement path responsible for their position changes; done means symbols remain stable during panning without confusing this with the documented collision fade behavior.

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
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.