iPad graph cut off does not indicate more marks

[KatieWoe]

Test device iPad Pro Operating System iPadOS 17.0.1 Browser Safari Problem description For https://github.com/phetsims/qa/issues/993. On iPad, if the soccer balls stack high enough that the graph markers go off the graph there is no indication this has happened. On Win 11 Chrome the last x is cut off, providing an indication, but on iPad this isn't happening. From @marlitas:

@KatieWoe it should cut off the data point halfway to give somewhat of an indication that there may be more data points. It looks like something shifted and that's no longer happening, so opening an issue seems appropriate.

Visuals

[marlitas]

@KatieWoe, I was not able to replicate this. I counted the amount of balls and data points in the picture you provided. There 18 balls in the tallest stack in soccer area stack and 18 data points in the corresponding stack in the graph, so there shouldn't be any cutting off happening since all are visible. Is there a different example of this happening?

[KatieWoe]

Here's a better picture.

[marlitas]

I met with @jonathanolson and we spoke about a way to make the data point cut-off point more robust:

• Listen to the top of the accordion box and top of numberline in the accordion box local coordinate frame.
• Apply a scaling adjustment based on space between.
• Use an epsilon to ignore tiny changes.

[marlitas]

@catherinecarter, @jonathanolson and I talked through what is needed to properly implement this design robustly, and though not impossible it is definitely tricky. I'm wondering what the threshold level is for this? How much time do we want to put into scaling these points properly before we look for a different solution?

And it should be noted that this will break not only in the iPad example @KatieWoe showed above, but will break anytime the height of the text changes in translations or when a browser uses a backup font.

A suggestion that may be quicker to implement:

• Use a gradient at the top of the accordion box to fade out data points and provide a visual cue that more data may be hidden.

[catherinecarter]

@marlitas and I decided to take the path of least resistance and implement a gradient effect when the stack of 'x's' or dots is close to the top of the accordion box. For simplicity, this will be in effect all the time rather than needing to detect when the stack goes close to the top and/or would or wouldn't cut 1/2 a marker off.

The fade will either go to black or go to the background color. We aren't sure yet and will play around with which is more clear that the stack is higher than the accordion box.

[marlitas]

Option 1 (Black Gradient):

Option 2 (Match Background Gradient):

I by far prefer Option 2...

[marlitas]

This is ready to cherry pick.

[KatieWoe]

Looks much better on iPad in rc.2