My web application makes use of a setInterval() task, and the code runs perfectly well in Chrome. Unfortunately, for the exact same code in Firefox, the task is slowed down considerably.
To demonstrate, I set the interval to 20 msec.
startZoomTime = Date.now(); intervalZoomTransform = setInterval(zoomTransformImg, 20, endWidth, startWidth);
zoomTransformImg() has a first code line:
console.log("zoomcycle start:" + (Date.now() - startZoomTime));
It also has the following last line before exiting, put in to check that the routine itself does not take longer to execute than the timer interval.
console.log("zoom finished:" + (Date.now() - startZoomTime));
Following are the iterations from Chrome (Version 96.0.4664.45 (Official Build) (64-bit)) and Firefox (94.0 (64-bit)) for the exact same code.
Chrome (first 10 cycles):
endWidth:1148, startWidth:960 zoomcycle start:20 zoom finished:20 zoomcycle start:40 zoom finished:40 zoomcycle start:60 zoom finished:60 zoomcycle start:80 zoom finished:80 zoomcycle start:100 zoom finished:100 zoomcycle start:120 zoom finished:120 zoomcycle start:140 zoom finished:140 zoomcycle start:160 zoom finished:160 zoomcycle start:180 zoom finished:180 zoomcycle start:200 zoom finished:200
Firefox (first 10 cycles):
endWidth:800, startWidth:640 zoomcycle start:20 zoom finished:21 zoomcycle start:202 zoom finished:203 zoomcycle start:389 zoom finished:390 zoomcycle start:582 zoom finished:583 zoomcycle start:769 zoom finished:771 zoomcycle start:1050 zoom finished:1050 zoomcycle start:1090 zoom finished:1091 zoomcycle start:1131 zoom finished:1133 zoomcycle start:1165 zoom finished:1166 zoomcycle start:1198 zoom finished:1199
On Chrome, the code being called never takes more than 1 msec to execute. On Firefox, it can take as much as 2 msec. But this is well below what I’ve read in the documentation about Firefox throttling to 4 msec intervals in certain circumstances.
The delay on Firefox, by the 10th iteration, settles down to roughly 30 msec and pretty much stays at this rate until the last iteration.
The code being called is changing an image width. For various reasons, I have to do this manually, not by changing the assigned class, as there can be a simultaneous location translation (which is handled by changing the assigned class). But to be clear, this throttling of the called method occurs even when the image position is static.
The MDN documentation directed me to the following: Set Timeout, Reasons for delays longer than specified. But I am not seeing how any of these conditions are applicable.
The only plugins on my Firefox are the following, so I don’t think the browser is doing anything significant in the background.
- OpenH264 Video Codec provided by Cisco Systems, Inc.
- Widevine Content Decryption Module provided by Google Inc.
Is this a known issue? Are there suggested work-arounds? (If Java, I would consider coding a “gameloop” type thread to run the operation and calculate the needed amount of sleep before the next iteration).
Ultimately I’m hoping for a 7 msec increment for the transitional image size zoom in/out changes. But I could probably make 15 to 20 work, if needed.
I’m working on a minimal example, but so far I haven’t been able to recreate the error. So there must be some operation in my code that is triggering Firefox in some manner. At this point, suggestions as to what to look for would be helpful (as I incrementally add to the example being built).