Map isn't animating smoothly in Chrome, even with a single layer style
Nobody has claimed this yet.
- 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
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
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