mapbox / mapbox/mapbox-gl-js

Pixel artefacts when panning, tilting and rotating the map

Open
#7,418 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

**mapbox-gl-js version**: v0.49.0 (also tested v0.50.0 and v0.46.0)

**browser**: Chrome (69), Chrome Canary (72) and Firefox (62)

**os**: Windows 10 & macOS (Mojave)

**gpu**: NVIDIA GeForce 1070 (Windows)

### Steps to Trigger Behavior

1. Tilt, pan and rotate view using (at least) the dark style

### Link to Demonstration

https://jsfiddle.net/robhawkes/hgp7bvou/3/

### Expected Behavior

No pixel artefacts on map when panning, tilting and rotating the map

### Actual Behavior

Pixel artefacts flash occasionally when panning, tilting and rotating the map. The artefacts flash quickly as they only appear for a single frame. If you catch an artefact and stop moving the map then the artefact remains on the screen.

### Evidence of issue

In the following gif you can see the occasional pixel artefact in the top of the image. The framerate of the gif is low so many of the artefacts aren't seen, though some are still visible so it's helpful to show the behaviour.

![recording19](https://user-images.githubusercontent.com/22612/46962602-79fe0900-d09b-11e8-8ebc-cef17e042274.gif)

In the following screenshot you can see an example of a pixel artefact in the top-centre of the map. The artefacts behave in a way where you can actually move back to where they occurred and get them to stay on the screen by not moving the map any more.

![2018-10-15 16_50_06-create a new fiddle - jsfiddle](https://user-images.githubusercontent.com/22612/46962609-7d919000-d09b-11e8-9fb2-ea5883a029a6.png)

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 artefacts using the linked JSFiddle while panning, tilting and rotating the map, including the dark style, on the listed browser and operating-system combinations. Trace the map-rendering path responsible for frame updates and identify a reproducible rendering failure. Done means the reported artefacts no longer appear during these interactions and the fix is verified across the supplied cases.

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
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.