Nav bar disappears when zoomed in (Chrome)

[Nancy-Salpepi]

Test device
MacBook Air m1 chip

Operating System
13.0.1

Browser
Chrome 107.0.5304.121

Problem description
For phetsims/qa#858, when zoomed in, if I exit a dialog using either the Esc or Return key, the nav bar is missing. Once I move the mouse or press Tab, it reappears.

I see this issue with published GO as well. I wasn't able to reproduce this with Safari or with other sims that have keyboard nav (published GFLB or Ratio and Proportion). @KatieWoe was also able to reproduce with Win11 + chrome.

Steps to reproduce

1. On either screen, zoom in a bit
2. Tab to and open the Preferences dialog
3. Press Esc
4. It may be necessary to open the dialog again and press escape again).

This is also seen with the keyboard shortcuts dialog, and in the PhET menu--when exiting the Check for Updates or About dialogs.

Visuals

missingnavbar.mp4

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Geometric Optics: Basics‬ URL: https://phet-dev.colorado.edu/html/geometric-optics-basics/1.2.0-rc.1/phet/geometric-optics-basics_all_phet.html Version: 1.2.0-rc.1 2022-11-18 16:30:43 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Language: en-US Window: 1476x781 Pixel Ratio: 1.7999999523162842/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: 31 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}

[pixelzoom]

This sounds like a general problem with pan-and-zoom, so assigning to @jessegreenberg.

@Nancy-Salpepi can you reproduce this with other sims on master?

[jessegreenberg]

Very strange! I don't know why pan and zoom would cause this, it doesn't do any hiding of things to optimize. Also, see how the nav bar is invisible from seconds 7-9 in this video recording and then pops into view at 9 seconds. So it is not related to dialogs. I think this is more of a rendering problem - like either scenery or the browser doesn't know to redraw some contents. I think we will need help from JO here.

[jessegreenberg]

For what it is worth - I can easily reproduce this in Windows 10 Chrome Version 107.0.5304.107 (Official Build) (64-bit). But when I remove preventFit: true from GOScreenView the problem goes away.

[Nancy-Salpepi]

@pixelzoom on master I was able to make the nav bar disappear in Geometric Optics, Gravity and Orbits, and Density by zooming in and then using the mouse to drag down until I can see the bottom of the screen. The nav bar appears when I move the mouse across the bottom of the screen.
I also tried: Fourier, Friction, JT, Ratio and Proportion, GFL:B, and BASE using my original steps but I wasn't able to reproduce the issue.

I tested with mac + chrome and Win10 + chrome.

GaOnavbar.mp4

[KatieWoe]

Happens with the Performance dialog as well.

[pixelzoom]

Raising priority. Blocks publication until someone says otherwise.

[kathy-phet]

Does it happen in already published simulations on the website?

[Nancy-Salpepi]

Yes it does @kathy-phet. I was able to produce the problem just now with Density, Gravity and Orbits, CCK-AC, and Geometric Optics.

[arouinfar]

After discussion with @kathy-phet, we decided that this issue is not blocking. Since some published sims are currently affected, we can fix GO:B when we fix the others.

That said, this is still a high priority issue. @jonathanolson please transfer this issue to the appropriate common repo and investigate.

[pixelzoom]

Transferring this issue to scenery.

[jessegreenberg]

Another data point, I am seeing this in energy-skate-park. Like #1507 (comment), it makes use of preventFit.

[Nancy-Salpepi]

@pixelzoom @AgustinVallejo FYI that I see this issue on Win10 + chrome for MSS (phetsims/qa#1008)

[kathy-phet]

@jonathanolson - Let's prioritize this scenery issue for after you finish the "file size reduction" common work. I don't want to block publication for this bug, but let's see if we can address it next iteration (or late this iteration JO if the file size stuff wraps up earlier). (FYI - @brent-phet @marlitas)

[marlitas]

I added an emergent task in Monday to track this. It's assigned to @jonathanolson and put it on for next iteration.

[Nancy-Salpepi]

Noting that I see this issue with Area Model Algebra (phetsims/qa#1041) and Area Model Multiplication (phetsims/qa#1042).

[jonathanolson]

@jessegreenberg noted phetsims/projectile-data-lab#237 might be related.

Somehow there were no tasks for this current iteration for this, I've added it to my current goals as emergent (sorry about it falling off the radar).

[jonathanolson]

Reproducing only in Chrome (on macOS), and only with SVG (on main).

Also can cause issues like the following:

[jonathanolson]

Problematic in Chrome Canary (no fix coming soon), and it indeed seems like a browser bug (adjusting a color within the SVG element causes it to appear, looks like a repaint issue).

[jonathanolson]

I think I've figured out a decent workaround above. It forces SVG refreshes while panning/zooming on Chrome (or other Chromium-based browsers).

@Nancy-Salpepi can you see if this is fixed on main for you?

[KatieWoe]

Looks better on main to me.

[Nancy-Salpepi]

Looks great to me!!

[jonathanolson]

Thanks! Closing.