Slow Frame Rate when Starting Simulation on Firefox

[brooklynlash]

Test device
Lenovo ThinkPad
Operating System
Windows 10

Browser
Firefox

Problem description
This is for phetsims/qa#560
When opening the Systems section of the sim, the frame rate is slow and I saw some flickering in between frames for the biker. It seems to get better as time goes on.

Steps to reproduce

1. Open the simulation
2. Click on the Systems section
3. Drag the cursor of the biker to max

Visuals

Troubleshooting information:
!!!!! DO NOT EDIT !!!!!
Name: ‪Energy Forms and Changes‬
URL: https://phet-dev.colorado.edu/html/energy-forms-and-changes/1.4.0-rc.3/phet/energy-forms-and-changes_all_phet.html
Version: 1.4.0-rc.3 2020-10-01 23:45:37 UTC
Features missing: touch
Flags: pixelRatioScaling
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:81.0) Gecko/20100101 Firefox/81.0
Language: en-US
Window: 1728x858
Pixel Ratio: 2.2222222222222223/1
WebGL: WebGL 1.0
GLSL: WebGL GLSL ES 1.0
Vendor: Mozilla (Mozilla)
Vertex: attribs: 16 varying: 30 uniform: 4095
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32)
Max viewport: 32767x32767
OES_texture_float: true
Dependencies JSON: {}

[brooklynlash]

Forgot to mention that my cursor is a bit slow with this gif application but the cursor works normally usually.

[KatieWoe]

I did a quick check on on Mac 10.15 Firefox to see if it happens on other devices and I did see the flashing behavior there.

[jbphet]

I just tried this on my Win 10 development machine and on a MacBook Air. I didn't notice flashing during the initial peddling, as shown in the GIF above, but I did see it as PhET Girl started to slouch as she ran out of energy. On both devices, I saw a fairly noticeable flash when the image changed to a more "slouchy" one. When I did it a 2nd time, I didn't see the same flashes.

I would classify this as a minor glitch that doesn't really impact usability, and is definitely not blocking for the 1.4.0-rc.3 release. Having said that, it would be nice to fix if it were easy.

@jonathanolson - It almost seems like the browser isn't fully loading the image until it is needed, or something along those lines. Is there anything I can do in the code, or that could be done in Scenery, to improve this? Please assign back to me when you've answered.

[kathy-phet]

I took a look. I agree its minor and should not block publication. I could be a learning opportunity though if JO sees what might be causing this.

[KatieWoe]

Looking quickly a Mac Firefox, and while the frames aren't necessarily slow there, the flashing is still present.

[KatieWoe]

It does seem to happen in published though.