Shaking sim when a card comes in from off screen

[KatieWoe]

Test device Dell Operating System Win 11 Browser Chrome Problem description For https://github.com/phetsims/qa/issues/804. This seems to happen on the published sim as well. If a card is dragged off screen and let go to return to their carousels, the sim, and particularly the edges of the function machine, seem to flash and shake. It seems to happen whenever a card is to the left of the left carousel, or the right of the right carousel, but I found it most noticeable with the top or bottom cards when they go off screen. Steps to reproduce

1. Go to the mystery screen (found some screens easier to replicate on than others, but any will do)
2. Grab number at the top of the left carousel and drag it as far right as possible. Hopefully this takes it off the top of the screen
3. Let go and observe

Visuals

Troubleshooting information:

!!!!! DO NOT EDIT !!!!! Name: ‪Function Builder‬ URL: https://phet-dev.colorado.edu/html/function-builder/1.2.0-dev.7/phet/function-builder_all_phet.html Version: 1.2.0-dev.7 2022-05-19 15:05:31 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36 Language: en-US Window: 1280x649 Pixel Ratio: 1.5/1 WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium) GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 4096 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 32767x32767 OES_texture_float: true Dependencies JSON: {}

[KatieWoe]

Also in https://github.com/phetsims/qa/issues/805

[pixelzoom]

@KatieWoe I cannot reproduce this on any macOS browsers (Safari, Chrome, Firefox).

Is this specific to Win11 + Chrome, or does it happen with other browsers on Win11?

[KatieWoe]

It doesn't look like it happens on Firefox, or if it does it isn't nearly as bad.

[pixelzoom]

We could work around this by preventing the user from dragging cards (and presumably functions) outside the visible bounds of the ScreenView. But those are significant code changes that I'd rather not make, and I'm more inclined to do nothing.

@jonathanolson thoughts on what's causing this, and how/whether to address it?

@amanda-phet your opinion on whether this needs to be addressed for the 1.2 release?

[pixelzoom]

@KatieWoe does this also occur when a function is dragged off-screen and released?

[KatieWoe]

Yes it does. It varies a bit by screen, but not much.

[jonathanolson]

Not exactly sure. Could try the preventFit: true flag on the item that goes off-screen (or everything) to see if it helps. Is that rendered in Canvas or SVG?

[pixelzoom]

I discussed this more with @KatieWoe. The card doesn't have to be off-screen, it just has to be to the left or right of the carousels. Flickering/shifting of the screen can be seen while dragging the card, and while it's animating to the carousel.

@jonathanolson asked:

Is that rendered in Canvas or SVG?

Since the entire screen is shifting around, I'm not sure what you're referring to by "that". The flickering is most noticeable on the ends of the builder, but pretty much everything is shifting around. There's one layer of controls that has renderer: 'canvas' as a workaround, see #69. Everything else is whatever the default renderer is.

[pixelzoom]

@jonathanolson said:

... Could try the preventFit: true flag ...

Re the preventFit: 'true' workaround... It seems like every time I publish a sim, I'm encountering a similar problem (parts of the display shifting around) and I end up back at applying the preventFit: 'true' workaround. Perhaps we should finish addressing the general issue, see https://github.com/phetsims/scenery/issues/1289.

[pixelzoom]

In the above commit, I (again) applied the preventFit: 'true' workaround. Since the entire screen is shifting around, I applied it to FBScreenView, the base class for all ScreenViews in this sim.

I don't have a Win11 test machine. @KatieWoe please test 1.2.0-dev.8 and let me know if it resolves the problem.

[KatieWoe]

It does seem to resolve the problem on Win 11 Chrome

[pixelzoom]

Thanks @KatieWoe.

I never received a response from @amanda-phet. So I'm going to make the call, and move ahead with this solution in FB 1.2.

[pixelzoom]

To verify in 1.2.0-rc.1, confirm that they problem described in https://github.com/phetsims/function-builder/issues/146#issue-1243505062 is not present on Win11 + Chrome.

[KatieWoe]

Looks good on Win 11 Chrome in rc.1. Closing