mapbox / mapbox/mapbox-gl-js

Map isn't animating smoothly in Chrome, even with a single layer style

Open
#7,916 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

I'm having a weird issue using Chrome and Macbook Pro 2016 with a 2560x1600 display.

Even after simplifying the style to one layer (water fill without antialiasing), map movement and animations seem to be at about 30 FPS most of the time. When I enable FPS meter in Chrome DevTools, it shows 60 FPS but I'm close to certain this is not the actual FPS, because:

- When I resize the browser window to a half or less, the map becomes smooth, there's a very perceptible difference.
- Google Maps in Chrome or Mapbox with the same style in Safari are also completely smooth.

Also, one thing I noticed in the profiler: in Google Maps, the GPU spends about 2ms rendering the frame, in Mapbox with a much simpler map it varies between ~4ms and ~10ms. Sometimes almost all of the frames are ~10ms of GPU, sometimes it's a mix, sometimes it's mostly ~4ms (the test is always done on the whole-world-visible zoom level where only horizontal panning is possible. )

Any ideas what could be causing this, is there anything I should try (including changes to Mapbox source code)?

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

Reproduce the report on the stated Chrome and MacBook Pro 2016 setup at 2560x1600, comparing full-window and half-window behavior with the single-layer water-fill style. Start with Chrome DevTools’ FPS meter and GPU profiler, then compare the results with Safari and Google Maps; done means identifying a reproducible cause or a concrete source-level change that restores smooth animation.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, performance, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.