Non-looping GIFs in unfocused tabs never paint final frame

[stalgiag]

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Details about the bug:

• p5.js version: main branch
• Web browser and version: all
• Operating System:
• Steps to reproduce this:

Upload a non-looping GIF, switch tabs, wait a few seconds, return to sketch. The GIF will be frozen on the frame that it was on when the tab was switched.

I will try to loop back around and make a sketch example soon but in the meantime, someone else is welcome to do so.

related to #5484

[stampyzfanz]

Reproduced with example sketch: https://editor.p5js.org/stampyzfanz/sketches/Wn9GsiQs2

[yashlamba]

Hi, new to p5.js and looking forward to contribute!

I looked into this issue and it comes down to how we evaluate number of frames to skip here:

p5.js/src/image/p5.Image.js

Line 236 in c3f4121

const skips = Math.floor(props.timeDisplayed / curDelay);

and this condition:

p5.js/src/image/p5.Image.js

Lines 241 to 243 in c3f4121

	if (props.loopLimit !== null && props.loopCount >= props.loopLimit) {
	props.playing = false;
	} else {

I would like to work on this, but what is the ideal behaviour here? When someone switched tab, should the GIF:

1. pause and resume or
2. Continue running
   • If there are still frames left (gif takes 1 min and user switched for 30 seconds), it should resume from +30 seconds of when the tab was switched.
   • If no frames are left, show the last frame.