Bug 121851 – The Canvas element in Safari doesn't display all frames generated via requestAnimationFrame to the user.

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Canvas

[Austin Appleby]

I'm a developer on Google Maps, and we've been investigating a performance issue where Maps runs much less smoothly in Safari than in Chrome.

It looks like a portion of the performance issue is being caused by an interaction between Safari's Canvas implementation and the Quartz 'Beam Sync' feature - a Canvas application may update its frame 60 times a second, but only a fraction of those updates are actually displayed to the user.

Steps to Reproduce:
To repro on a 15-inch Macbook Pro with Retina display -

Run Quartz Debug and open the 'Frame meter' tool and the 'Quartz Debug Settings' tool.

Open 'BunnyMark' in Safari (a simple Canvas benchmark, located at http://www.goodboydigital.com/pixijs/bunnymark/) and click in the window until the meter in the top left reads '200 Bunnies' or so.

Expected Results:
Both the Frame Meter tool and BunnyMark should report 60 FPS and the animation should be consistently smooth.

Actual Results:
The frame rate counter in BunnyMark will read '60 FPS', while the Frame Meter dial will read 35-40 FPS. The animation in BunnyMark will appear choppy and erratic.

Moving the Safari window around or disabling Beam Sync in the Quartz debug will cause FrameMeter to rise to 60 fps and the animation will be much smoother.

[Brent Fulgham]

There doesn't appear to be an issue here in Safari 16.