Touch Areas Overlap

[Nancy-Salpepi]

Test device
Dell

Operating System
Win10

Browser
Chrome

Problem description
phetsims/qa#789

The touch areas for the soccer balls overlap. I quickly tested on the iPad and didn't have an issue selecting the desired ball when they were side-by-side, but I thought I would report it.

Visuals

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Center and Variability‬ URL: https://phet-dev.colorado.edu/html/center-and-variability/1.0.0-rc.1/phet/center-and-variability_all_phet.html?showPointerAreas Version: 1.0.0-rc.1 2022-03-21 16:46:53 UTC Features missing: applicationcache, applicationcache, touch User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.82 Safari/537.36 Language: en-US Window: 1740x910 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: 30 uniform: 4096 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 32767x32767 OES_texture_float: true Dependencies JSON: {}

[amanda-phet]

I wonder if this is a result of having moved the tick marks closer together. I don't think the touch areas need to be this wide and would recommend making them just slightly wider than the ball.

[chrisklus]

Thanks @Nancy-Salpepi! Does this look okay @amanda-phet?

[chrisklus]

@samreid and I committed what was in the screenshot above. If it seems fixed, please leave open and relabel as status:ready-to-cherry-pick, thanks!

[amanda-phet]

Looks great to me!

[chrisklus]

@samreid and I spot-checked this for #122, closing.