Easier Ways To Remove Frame Rate Limits in Safari

[mdrejhon]

Years ago, I did 120Hz browser compatibility tests, as Chrome/FireFox started supporting HFR back in 2012-2013. It was discovered that Internet Explorer and the old version of Edge had a 105fps cap, however, and I later learned Safari did not support more than 60fps.

As of 2024, all major browser on all major platforms, can do HFR in all APIs, as long as the underlying operating system and GPU supports it. This was not true until IE/old Edge was discontinued, and Safari added a way to remove the 60fps limit.

All browser APIs are all High Frame Rate (HFR) >60fps compatible already.

CANVAS 2D, WebGL, requestAnimationFrame, CSS animations, scrolling, VIDEO, all works with 120fps+ and 240fps+ HFR, as long as the GPU/OS supports the Hz/framerate for that particular feature.

HFR Compatible Platforms

• Windows (all)
• MacOS
• iPadOS (since Safari 17+, new OLED iPad needs Safari 18+)
• iOS/iPhone (since Safari 18+)
• Android
• Linux Wayland
• VisionOS
• Meta Quest2/3 VR

HFR Compatible Browsers

• Chrome (since 2012)
• Firefox (since v25 in 2013)
• Edge (Chromium)
• Safari (since 17+ on some, 18+ on all)
• Almost all other browsers based on Chromium and Gecko (Brave, Opera, etc)

HFR Comaptible APIs

(As long as GPU/OS allows it. OS may reduce Hz in battery saver mode. Also OS/GPU framerate limits may vary by feature, e.g. 120fps scrolling, 60fps video. This isn't a browser limitation)

• VIDEO elements (whenever GPU supports HFR video)
• CANVAS elements
• requestAnimationFrame()
• CSS Animations
• Scrolling
• All other animation APIs

Even Safari does 120fps+ in all the above now, but requires flag change:

Users Jumps Hoops to Make Safari Run At 120fps+

All major browsers except Safari are framerate-uncapped by default, for all APIs.

However, to do more than 60fps in Safari, requires enabling the developer menu, and setting a flag "Prefer Page Rendering Updates Near 60fps". Once done, iPad/iPhone/Mac runs at 120fps under Safari 18+. TestUFO successfully runs at 120fps and even 240fps+ on Apple hardware.

Making >60fps Easier for Apple Users

Consequently, we are starting a standardization initiative to find an easier solution that is cross-platform, preferably along the lines of a site-specific framerate-limit-removing API of sorts (click-based like fullscreen, permission-based like Window Management API, or other similar mechanism). Basically a javascript-equivalent of toggling the 60fps browser compositor frame rate limit.

Current GitHub issue at WICG:

API Proposals to Remove Frame Rate Limits

[mdrejhon]

Speeding up High-Hz Advocacy: 240Hz is no longer for gamers.

For those advocating high-Hz, one great way to make high refresh rate mainstream is to repeatedly communicate "240Hz is not just for games". New 240Hz+ OLEDs include HDR as standard in a much less crappy way as LCD HDR.

Unlike for LCDs, refresh rates are much more visible to the mainstream when it comes to OLEDs.

TechSpot said, "The 240Hz refresh rate at 4K is much better than I was expecting for productivity work.. Relative to the 144Hz LCD I was using, the combination of a higher refresh rate and faster response times makes this QD-OLED much nicer to use for everyday tasks. Especially when browsing the web and scrolling through text, the speed and refresh rate combination is noticeable and provides a smoother, clearer experience – so it's not just gaming where you'll benefit from a 240Hz refresh rate."

This grows demand for high-framerate animations, especially since 4x geometrics (60-vs-240, or 120-vs-480) is much more visible to the mainstream, like 480p-vs-4K, instead of merely 720p-vs-1080p rather than doing mostly useless 240-vs-360Hz refresh rate incrementalism.