Highlighted

Firefox and frame rate question

Participant ,
Mar 29, 2019

Copy link to clipboard

Copied

Hi.

Through much testing and trial and error I have come to the conclusion that Firefox browsers, from about version 50 onwards, throttle the frame rate. It appears to be a deliberate feature. The frame rate that is set is lowered, usually by a factor of 0.7 to 0.8. 30 fps dips down to 24, 80 fps down to 64, etc.

The frame rate is being throttled. Launching a separate process that requires GPU resources, whether it is in the same browser (opening a new tab), or a different browser (Edge or Chrome running an animation at the same time), or any 2D graphics application, increases the animation frame rate in Firefox to approximately the set frame rate. 30 = 30. 80 = 80.

Tests on two Windows 10 desktop PCs, and a Windows 7. The most recent Firefox version to implement the set frame rate was FF 47.

I tried alternate timing modes, RAF and RAF_SYNCHED -- to no avail.

Does anyone know a solution? I am tempted to raise the frame rate applied only to Firefox.

Okay, I've done some more thinking and testing. The code above, using RAF_SYNCHED, approximates most closely the behavior of other browsers. Par for course perhaps. The frame rates that work best are divisors of 60. 30, 20, 12. Edge and Chrome don't like the switch, so you need a conditional statement and a code to detect Firefox. Example:

var ff=(('netscape' in window) && / rv:/.test(navigator.userAgent))?1:-1;

if (ff != -1) createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

I don't know precisely in what version FPS throttling became a feature. (The change must have been around the version FF dropped NPAPI.) The version may be irrelevant, since older versions evidently ignore RAF_SYNCHED. (Ticker.timingMode stays at default?) I'm checking on the browser version to be on the safe side. I think it doesn't matter. If there's no further post from me, consider it the best I could do. That is, you don't need to worry about the FF version. Older FF browsers work fine.

Views

695

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Firefox and frame rate question

Participant ,
Mar 29, 2019

Copy link to clipboard

Copied

Hi.

Through much testing and trial and error I have come to the conclusion that Firefox browsers, from about version 50 onwards, throttle the frame rate. It appears to be a deliberate feature. The frame rate that is set is lowered, usually by a factor of 0.7 to 0.8. 30 fps dips down to 24, 80 fps down to 64, etc.

The frame rate is being throttled. Launching a separate process that requires GPU resources, whether it is in the same browser (opening a new tab), or a different browser (Edge or Chrome running an animation at the same time), or any 2D graphics application, increases the animation frame rate in Firefox to approximately the set frame rate. 30 = 30. 80 = 80.

Tests on two Windows 10 desktop PCs, and a Windows 7. The most recent Firefox version to implement the set frame rate was FF 47.

I tried alternate timing modes, RAF and RAF_SYNCHED -- to no avail.

Does anyone know a solution? I am tempted to raise the frame rate applied only to Firefox.

Okay, I've done some more thinking and testing. The code above, using RAF_SYNCHED, approximates most closely the behavior of other browsers. Par for course perhaps. The frame rates that work best are divisors of 60. 30, 20, 12. Edge and Chrome don't like the switch, so you need a conditional statement and a code to detect Firefox. Example:

var ff=(('netscape' in window) && / rv:/.test(navigator.userAgent))?1:-1;

if (ff != -1) createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

I don't know precisely in what version FPS throttling became a feature. (The change must have been around the version FF dropped NPAPI.) The version may be irrelevant, since older versions evidently ignore RAF_SYNCHED. (Ticker.timingMode stays at default?) I'm checking on the browser version to be on the safe side. I think it doesn't matter. If there's no further post from me, consider it the best I could do. That is, you don't need to worry about the FF version. Older FF browsers work fine.

Views

696

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 29, 2019 0
Participant ,
Mar 29, 2019

Copy link to clipboard

Copied

createjs.Ticker.timingMode = createjs.Ticker.RAF;

createjs.Ticker.setFPS(lib.properties.fps);

Sets the frame rate at 60 always.

createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

createjs.Ticker.setFPS(lib.properties.fps);

Frame rates stutter too much and 60 fps is the maximum.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 29, 2019 0
Participant ,
Mar 29, 2019

Copy link to clipboard

Copied

Okay, I've done some more thinking and testing. The code above, using RAF_SYNCHED, approximates most closely the behavior of other browsers. Par for course perhaps. The frame rates that work best are divisors of 60. 30, 20, 12. Edge and Chrome don't like the switch, so you need a conditional statement and a code to detect Firefox. Example:

var ff=(('netscape' in window) && / rv:/.test(navigator.userAgent))?1:-1;

if (ff != -1) createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

I don't know precisely in what version FPS throttling became a feature. (The change must have been around the version FF dropped NPAPI.) The version may be irrelevant, since older versions evidently ignore RAF_SYNCHED. (Ticker.timingMode stays at default?) I'm checking on the browser version to be on the safe side. I think it doesn't matter. If there's no further post from me, consider it the best I could do. That is, you don't need to worry about the FF version. Older FF browsers work fine.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 29, 2019 0
Participant ,
Mar 30, 2019

Copy link to clipboard

Copied

TargetActualTargetActualTargetActualTargetActual
1211262140325433
1313272141325533
1413282142325633
1513292143325733
1616302144325833
1716312245325933
1816323246326033
1916333247326133
2016343248326233
2119353249336333
2221363250336463
2321373251336563
2421383252338064
252139325333

Firefox targets specific frame rates. 13, 16, 22, 32, 64. Other frame rates are throttled back in the browser. When GPU resources allow, the throttled frame rates can go up to the targeted frame rates.

This list was made based on Windows 10 tests. It does not represent a reliable guide for Firefox behavior on Mac and Linux, but I believe it is fairly true on Windows.

So far I haven't determined with which version of Firefox throttling frame rates was introduced. I will append that information, if I can.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 30, 2019 0
Participant ,
Mar 30, 2019

Copy link to clipboard

Copied

============= Begin Test =============

Same animation, same size ...

FF42 (Win7)
fps 12 = 11
fps 20 = 16
fps 30 = 30
fps 60 = 50s

FF43 (Win10)
fps 12 = 11
fps 20 = 16
fps 30 = 30
fps 60 = 40s

FF47 (Win7)
fps 12 = 11
fps 20 = 16
fps 30 = 30
fps 60 = 50s

FF48 (Win7)
fps 12 = 11
fps 20 = 16
fps 30 = 30
fps 60 = 50s

FF56 (Win10)
fps 12 = 11
fps 20 = 16
fps 30 = 23-30
fps 60 = 37-43

FF60 (Win10)
fps 12 = 11
fps 20 = 16
fps 30 = 23-30
fps 60 = 37-43

FF66 - latest version (Win10)
fps 12 = 11
fps 20 = 16
fps 30 = 21-22
fps 60 = 34-36

FF66 - latest version (Win10 on different computer)
fps 12 = 11
fps 20 = 16
fps 30 = 21-22
fps 60 = 34-36

This points to increased frame rate throttling in recent FF releases.

RAF_SYNCHED that uses the requestAnimationFrame API is supported by Firefox in all of the tested versions above.

FF66 - RAF_SYNCHED mode
fps 12 = 12
fps 20 = 20
fps 30 = 30
fps 60 = high 50s

FF66 - RAF_SYNCHED mode with slightly higher frame rate
fps 13 = 12
fps 22 = 20
fps 33 = 30
fps 64 = 60

============= Chrome & Edge =============

Chrome (Win10) - RAF_SYNCHED mode
fps 12 = 12
fps 20 = 20
fps 30 = 30
fps 60 = high 50s

Chrome (Win10)
fps 12 = 11
fps 20 = 19
fps 30 = 29
fps 60 = 59

Edge - RAF_SYNCHED mode
fps 12 = 11
fps 20 = 16
fps 30 = 22-24
fps 60 = 60

Edge
fps 12 = 12
fps 20 = 20
fps 30 = 22-24
fps 60 = 60-61

============= End of Test =============

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 30, 2019 0
tnbnicer LATEST
Participant ,
Apr 01, 2019

Copy link to clipboard

Copied

I just had to post this. Yesterday I installed the biannual update for Windows 10. There's one update in spring and one every fall. Windows upgraded to version 1809 from 1803 and in the process, the Edge browser received an update.

1803:

Microsoft Edge 42.17134.1.0
Microsoft EdgeHTML 17.17134

1809:

Microsoft Edge 44.17763.1.0
Microsoft EdgeHTML 18.17763

Above in the Edge test fps 30 stands out, because the actual frame rate achieved is 22-24. If you wanted to run an animation at 30 fps, you couldn't.

Edge 44.17763.1.0 - RAF_SYNCHED mode
fps 12 = 11
fps 20 = 16
fps 30 = 22-24
fps 60 = 60

Edge 44.17763.1.0
fps 12 = 12
fps 20 = 20
fps 30 = 30-32
fps 60 = 60

Microsoft fixed it.

I still have a Windows 10 version 1803 with the older browser on a backup drive that runs on the same hardware. I double-checked the frame rates on that system, and 30 fps did not work. Definitely not. (fps 30 = 22-24) After the upgrade it does work, in non RAF_SYNCHED mode. Good news.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 01, 2019 1