search

phetsims / equality-explorer

"Equality Explorer" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
2 stars 3 forks source link

Parts of the UI shift around #174

Open Nancy-Salpepi opened 3 years ago

Nancy-Salpepi commented 3 years ago

Test device MacBook Air (m1 chip)

Operating System 12.0.1

Browser Chrome

Problem description https://github.com/phetsims/qa/issues/735

On the Variables and Operations screens, when the balance moves up and down, the accordion panels on the right side shift. I do not see this in the published version.

Steps to reproduce

  1. Select the Operations screen
  2. Open the Snapshots accordion panel
  3. Place an X on the left side of the scale
  4. Increase and decrease the value of X using the vertical spinner

Visuals panelsshift

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Equality Explorer‬ URL: https://phet-dev.colorado.edu/html/equality-explorer/1.1.0-rc.1/phet/equality-explorer_all_phet.html?showAnswers&rewardScore=1 Version: 1.1.0-rc.1 2021-11-09 18:21:34 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/95.0.4638.69 Safari/537.36 Language: en-US Window: 1314x690 Pixel Ratio: 2/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: 80) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}
pixelzoom commented 3 years ago

Reproduced on macOS 12.0.1 + Chrome 95.0.4638.69.

Does not occur on macOS 10.13.6 + same Chrome 95.0.4638.69.

This is a scenery problem that has been coming up repeatedly over the past several months. See https://github.com/phetsims/scenery/issues/1289. I guess I'll add the same preventFit: true workaround to this sim.

pixelzoom commented 3 years ago

Workaround applied to all screens in the above commits, in master and 1.1 branches.

@Nancy-Salpepi please verify in master. If it looks OK, change the label to "fixed-awaiting-deploy".

Nancy-Salpepi commented 3 years ago

Looks good in master.

stemilymill commented 3 years ago

@pixelzoom would this visual shift be related? I saw it in the Solve It! screen first in the rc version and then checked master and saw it there as well.

I have only observed this in Win10 Firefox 94.0.1 so far.

There is noticeable movement in the spinner and buttons next to it in all game levels, but the movement in the equation panels is either much more subtle or only present in later levels.

This does not appear to happen in the Operations screen.

https://user-images.githubusercontent.com/85511101/142291908-2c110061-5dd8-4a61-8819-c07244768a5b.mp4

pixelzoom commented 3 years ago

Thanks for reporting @stemilymill. I'm fairly certain that I applied the workaround to all screens, but I'll confirm.

Nancy-Salpepi commented 3 years ago

Using MacBook Air (m1 chip) macOS 12.0.1 + safari 15.1/chrome 95.0.4638.69

I don't see https://github.com/phetsims/equality-explorer/issues/174#issuecomment-972157049 on master. operationsbuttons

pixelzoom commented 3 years ago

I verified that I applied the workaround to the Solve It! screen:

// EqualityExplorerConstants.js
  SCREEN_VIEW_OPTIONS: {
    layoutBounds: ScreenView.DEFAULT_LAYOUT_BOUNDS,

    // Workaround for things shifting around that aren't supposed to move
    // See https://github.com/phetsims/scenery/issues/1289 and https://github.com/phetsims/equality-explorer/issues/174
    preventFit: true
  },
// SolveItScreenView.js
    super( EqualityExplorerConstants.SCREEN_VIEW_OPTIONS );

Testing in master...

I do NOT see this problem with:

I DO see this problem with:

In addition to the buttons and NumberPicker shifting around, I see movement in the equations above them. Variables like x (which use MathSymbolFont) shift up and down quite a bit.

Interesting that I do NOT see this shifting behavior on the other screens, only the Solve It! screen.

pixelzoom commented 3 years ago

The control that we're interacting with is UniversalOperationControl. I tried adding preventFit: true to its options, and there is no change.

pixelzoom commented 3 years ago

@jonathanolson could you please have a look? To summarize:

jonathanolson commented 3 years ago

Confirmed that this looks like SVG just... flickering due to antialiasing changes in Firefox. Testing shape-rendering:geometricPrecision didn't fix. I tried some layerSplit: true cases, which isolated each part (and helped), but it seems impractical.

I don't see a good fix for this (besides WebGL in Scenery wouldn't do this).

pixelzoom commented 3 years ago

Thanks @jonathanolson. So there is no known fix for Firefox at this time. I'll make a note about this in https://github.com/phetsims/scenery/issues/1289.

@amanda-phet In a nutshell, there is still some minor “shifting” of UI components in the Solve It! screen on Firefox, as demonstrated in https://github.com/phetsims/equality-explorer/issues/174#issuecomment-972157049. @jonathanolson had a look, and could not identify a fix. My recommendation is to defer this issue to a future release or MR. The alternative is to block Equality Explorer 1.1 until a fix is identified — which seems unnecessary and unlikely. Are you OK with deferring?

High priority, because this is the sole issue blocking the next RC.

amanda-phet commented 3 years ago

I agree that it should not block publication of 1.1, this is low priority. Firefox often gives us weird issues, and even still, this is not a major one IMO.