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

[fhucho]

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)?

[fhucho]

Seems that it could be some vsync-related issue. I've done a similar test to https://www.vsynctester.com using a custom layer: draw red rectangle in even frames, cyan rectangle in odd frames. True 60 FPS should result in a flickery gray rectangle. And indeed, even when the FPS meter shows 60 FPS, the rectangle sometimes stays cyan or red for a while during map movement. After resizing the window to a smaller size, it's flickery gray as expected.

The question is, why don't Google Maps have this issue with a much more complex map?

[mourner]

It's very hard to debug things like this because it varies greatly across different GPUs/machines, and there are no good ways to profile GPU work in Chrome (about:tracing results are hard to make sense of). If you find any clues on what might be the culprit in your case, we'd love to know. @ansis any thoughts on this?

[fhucho]

I've compared Mapbox and Google Maps in chrome://tracing:

• Graphics.Pipeline.DrawAndSwap takes ~1 ms in Google Maps, and roughly 2 to 20 ms Mapbox, there are often two overlapping DrawAndSwap bars and almost all of the time is spent in WaitForAck.
• CrGpuMain is doing very little work in Google Maps but often fully occupied in Mapbox. Both spend most time on CommandBufferService:PutChanged.

[exotfboy]

I came across the same problem.