Line drawn when mass moves

[ghost]

Test Device

MacBook Air

Operating System

macOS 10.13.4

Browser

Firefox 60.0.1

Problem Description

For phetsims/qa/issues/122. A line is "drawn," i.e. is left behind, when a mass is moved next to a mass that is slightly bobbing.

Steps to Reproduce

1. Go to the Intro screen or the Vectors screen.
2. Attach the 250g mass and the orange mass. (It doesn't have to be these masses; some other masses work. Thus far, the 50g and pink masses don't work.)
3. Stop the masses from moving.
4. Nudge the orange mass.
5. Move the 250g mass up or down.

Visuals

You have to click on the gif to see the line:

This is a closeup of the orange mass:

Troubleshooting Information

Name: ‪Masses and Springs‬
URL: https://bayes.colorado.edu/dev/html/masses-and-springs/1.0.0-dev.102/phet/masses-and-springs_all_phet.html
Version: 1.0.0-dev.102 2018-05-21 16:49:55 UTC
Features missing: touch
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:60.0) Gecko/20100101 Firefox/60.0
Language: en-US
Window: 1440x723
Pixel Ratio: 1/1
WebGL: WebGL 1.0
GLSL: WebGL GLSL ES 1.0
Vendor: Mozilla (Mozilla)
Vertex: attribs: 16 varying: 15 uniform: 1024
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 80)
Max viewport: 16384x16384
OES_texture_float: true
Dependencies JSON: {"assert":{"sha":"928741cf","branch":"master"},"axon":{"sha":"4ce9d171","branch":"master"},"brand":{"sha":"89d28f63","branch":"master"},"chipper":{"sha":"aaa0d77a","branch":"master"},"dot":{"sha":"070374e3","branch":"master"},"griddle":{"sha":"f9afbaec","branch":"master"},"joist":{"sha":"0d2b102d","branch":"master"},"kite":{"sha":"bd06199c","branch":"master"},"masses-and-springs":{"sha":"577e8758","branch":"master"},"phet-core":{"sha":"49911783","branch":"master"},"phet-io":{"sha":"545d86c9","branch":"master"},"phet-io-wrapper-classroom-activity":{"sha":"5204ea8e","branch":"master"},"phet-io-wrapper-lab-book":{"sha":"ccaaaa4b","branch":"master"},"phet-io-wrappers":{"sha":"1b254bcf","branch":"master"},"phetcommon":{"sha":"9a8756e6","branch":"master"},"query-string-machine":{"sha":"f9def230","branch":"master"},"scenery":{"sha":"588f22fb","branch":"master"},"scenery-phet":{"sha":"b31317ca","branch":"master"},"sherpa":{"sha":"ded365aa","branch":"master"},"sun":{"sha":"9ebf1a6c","branch":"master"},"tandem":{"sha":"beb7d180","branch":"master"},"twixt":{"sha":"756c0bd8","branch":"master"}}

[Denz1994]

I've tried the steps in FireFox and Chrome on both windows 10 and IOS but I can't reproduce the "ghost line". I have seen this before during development, but it was rare and I thought it was a browser issue.

Can you consistently reproduce this @lmulhall-phet?

[ghost]

@Denz1994, so far as I know, it's only an issue on macOS/FF. I can't consistently reproduce this with the exact same set of conditions. Sometimes I need to use a different set of masses, or move the right mass instead of the left mass, but I can usually reproduce the ghost line if I mess around with it for a bit.

[Denz1994]

@jonathanolson Have you ever run into a problem where nodes are drawing these ghost lines when moved?

[jonathanolson]

Yup, basically it seems like a bug in certain SVG implementations that don't properly repaint some regions.

One potential workaround would be to wrap each mass with an invisible rectangle that is slightly larger than the actual mass. Thus when it redraws things, the region it repaints will be slightly larger, and thus will not include the artifact.

Let me know if it would be good to collaborate on this.

[Denz1994]

Okay, this makes sense. I don't know why certain regions wouldn't get painted though. Could it have to do with the gradients on the massNodes? Perhaps, the whole gradient isn't completely being painted before the next step is being called.

I added a background Rectangle with bounds slightly larger than the mass to compensate for the paint callbacks. Could you try in master @lmulhall-phet?

It would be good to also see if the springNodes replicates this behavior because each ring in the spring is three different segments. I tried switching on all the options on the vectors screen and having two masses oscillate quickly while changing the size of the sim screen. I wasn't able to get any ghost lines, but then again I'm not on a low-performance machine.

[jonathanolson]

I don't know why certain regions wouldn't get painted though. Could it have to do with the gradients on the massNodes? Perhaps, the whole gradient isn't completely being painted before the next step is being called.

It's possible. It totally depends on the browser code, their optimizations, etc. If we ever DO discover a consistent trigger for browser-specific bugs, it may be possible to work around it generally. So far it hasn't been worth the time to discover that (would probably take a while).

[Denz1994]

Understandable, thanks for the input @jonathanolson.

[phet-steele]

@jonathanolson this just looks like another one for phetsims/john-travoltage#193 IMO.

[ghost]

@Denz1994, I'm still seeing the ghost line in master.

[Denz1994]

Just adding this snapshot from Pendulum Lab, because it has the same bug. I could not reliably reproduce it though. I found that it goes away if a pendulum stops oscillating.

[Denz1994]

After review with @jonathanolson, the current solution for this bug is sim specific and will most likely require more work in common code. Since this is present in other published sims and isn't sim breaking, can we defer this issue @ariel-phet? Assigning to @ariel-phet for input.

[Denz1994]

Closing this issue as it is related to a larger issue in phetsims/scenery#810.