Water label appears on Olive Oil beaker at random times

[loganbraywork]

Test device
Windows 10 Laptop
Operating System
Windows 10
Browser
Firefox 74
Problem description
For phetsims/qa#488

At random times the Olive Oil label on the Olive Oil beaker will be replaced with the Water label. This bug always seems to occur when the water beaker is being moved over the burners, and always after the intro screen is opened for the first time. I have not seen this bug occur a second time in the same page without refreshing it. This bug cannot be reliably reproduced but does occur semi-regularly so I am documenting it. As soon as the water beaker is placed down the Olive Oil label returns. Seems to only occur on FireFox.
Steps to reproduce

1. Open the intro screen
2. Lift the water beaker and move it over the area where the burners are
3. Refresh the page and repeat if this bug does not occur
   Visuals
   

Troubleshooting information:
!!!!! DO NOT EDIT !!!!!
Name: ‪Energy Forms and Changes‬
URL: https://phet-dev.colorado.edu/html/energy-forms-and-changes/1.2.0-dev.12/phet/energy-forms-and-changes_en_phet.html
Version: 1.2.0-dev.12 2020-03-25 17:48:58 UTC
Features missing: touch
Flags: pixelRatioScaling
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:74.0) Gecko/20100101 Firefox/74.0
Language: en-US
Window: 1568x768
Pixel Ratio: 1.2244897959183674/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: {}

[chrisklus]

Thanks @loganbraywork! We discussed more on slack and @loganbraywork added that this happens somewhere between every 1 and 9 reloads, and it happens on his machine but not on a faster PC. Similarly, @zepumph helped troubleshoot on his end and found that it wasn't happening on his machine, but it was on a slower PC he has access too.

@zepumph suggested some different ways to try constructing the beaker view. @loganbraywork would you be up for finding a time to pair and try test some iterations on master?

[loganbraywork]

@chrisklus Sure thing! Just slack me whenever you guys are available

[chrisklus]

@loganbraywork and I paired today to test out a couple possible fixes.

First, we confirmed that this still happens with master on Windows Firefox on @loganbraywork's device. It took a few tries, but the bug still occurred after 5-7 tries.

Attempt 1 was not passing in a label for the water beaker, but using the default option for that string instead. This had no effect, as the bug occurred on the 1st and 2nd try of ~7 attempts.

Attempt 2 was using RichText instead of Text for the beaker strings. After 12 attempts, the bug did not appear. @loganbraywork was always able to get this to happen within 9 tries, but has averaged every 4-5. So perhaps this is a fix!

Thanks @zepumph for your suggestions, and thanks @loganbraywork for trying out these changes. I'll mark as status:ready-for-qa to verify this issue in the next RC/dev.

[loganbraywork]

Appears fixed as of the latest RC

[loganbraywork]

While the initial issue is fixed, there appears to be an entirely new issue which appears when pressing one beakers against the other while it sits on the burner.

[loganbraywork]

I've recently upgraded laptops and haven't seen this issue on the new one at all

[jbphet]

I've got a PC that is several years old, and I can't duplicate this with Firefox. Since it doesn't happen on @loganbraywork's newer computer, and it isn't a very likely use case, I'm going to go ahead and close this.