X label covers "Points off scale!" statement

Nancy-Salpepi commented 3 years ago

Test device iMac

Operating System 10.15.7

Browser chrome 92.0.4515.107 (also happens in other platforms)

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

In the generic screen, if a ball is on a value of 9 and the number picker is then used to increase the value of the other ball until it is off the scale, the X label will cover the "Points off Scale!" statement. I wasn't sure if you thought having the x label in front rather than behind was an issue.

Steps to reproduce

Select the generic screen
Move the blue ball onto the number line so that it has a value of 9
Move the pink ball onto the number line at a value below 9.
Use the top number picker to increase the value of the pink ball until the "points off scale" box appears on the screen.

Visuals https://drive.google.com/file/d/1haQwjdr97RrlLwqWWgqrIru6Z_Vr0mfm/view?usp=sharing

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Number Line: Distance‬ URL: https://phet-dev.colorado.edu/html/number-line-distance/1.0.0-rc.1/phet/number-line-distance_all_phet.html Version: 1.0.0-rc.1 2021-07-30 16:56:03 UTC Features missing: applicationcache, applicationcache, touch User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36 Language: en-US Window: 1852x875 Pixel Ratio: 1/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: {}

Nancy-Salpepi commented 3 years ago

It obviously happens in other instances, but I thought it was most relevant when the "points off scale" statement first appears on the screen.

amanda-phet commented 3 years ago

Can you list all of the instances where there is an overlap issue? Or do you mean the other instances could just involve different values, but it's the same issue: the label covers the statement.

@SaurabhTotey I think we should shift the "points off scale" message so that it's below the labels, and also to the right in the vertical case.

Nancy-Salpepi commented 3 years ago

Yes, what I meant is that is could be different values, or that the overlap happens with the "points off scale" message already on the screen and then the ball with its label moving over it (instead of the ball being there first and then the message appearing).

SaurabhTotey commented 3 years ago

I have adjusted the offsets so that the indicator is now further below the number line (or to the right of the number line in the vertical case). Assigning to @amanda-phet.

stemilymill commented 3 years ago

Another instance of x labels overlapping other things is in the explore screen, for the house/girl scene and thermometer scene, the x labels overlap the 0 on the number line.

x1 x2 labels overlap number line numbers zoom

stemilymill commented 3 years ago

@amanda-phet I also found that on iPad + safari, in the house/girl scene and the thermometer scene, the x labels slightly overlap with all the numbers on the number line.

ipad x label overlap all number

Edit: In the fish and bird scene, the point labels and distance labels can also overlap.

ipad number label overlap distance label (I messed with the color balance etc to make it more visible)

iPadOS version: 14.7.1

amanda-phet commented 3 years ago

The changes to the "Points off scale" message look good to me!

amanda-phet commented 3 years ago

There are a lot of overlapping issues here that I am going to try to transfer to a new issue.

amanda-phet commented 3 years ago

OK new issues created, so this can be closed.

SaurabhTotey commented 3 years ago

Reopening to verify that this made it into the 1.0 release.

phetsims / number-line-distance

X label covers "Points off scale!" statement #63