FPS drops -[Violation] 'requestAnimationFrame' handler took
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
### mapbox-gl-js version
v.3.16.0
### Browser and version
Version 142.0.7444.60 (Official Build) (arm64)
### Expected behavior
Not having FPS drops
### Actual behavior
If you go to your own examples at: https://docs.mapbox.com/mapbox-gl-js/example/clip-layer/ and pan around the FPS drops to 30 on my computer and CPU goes to 100% on all 8 cores (M1 macbook). This is especially visible when you go to codepen example and have it full screen.
```
73[Violation] 'requestAnimationFrame' handler took ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 52ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 54ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 51ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 51ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 84ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 108ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 102ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 75ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 116ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 82ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 65ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 54ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 58ms
```
### Link to the demonstration
_No response_
### Steps to trigger the unexpected behavior
_No response_
### Relevant log output
```shell
```
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
Start by reproducing the report in the clip-layer example, including the linked CodePen view in fullscreen, using Chrome 142 on the reported hardware. Then inspect worker.ts around line 440 and use the browser performance tools to identify the source of the requestAnimationFrame delays; done means the example no longer shows the reported FPS drops under the same interaction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, 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