MathSymbolFont artifact

[amanda-phet]

Noticed in https://github.com/phetsims/number-line-distance/issues/62

There seems to be an issue with the 'y' where part of the tail is left behind when the 'y' moves to a new location.

I see this in Function Builder sometimes as well, if I build a big function with negatives then change the values to 0. The location of the 'y' moves because the equation is getting shorter, and it leaves a trail of dots from the tail of the 'y'.

[pixelzoom]

Here's the screenshot from https://github.com/phetsims/number-line-distance/issues/62. Note the ".." to the left of y₂.

... and the testing configuration was:

Test device MacBook Air (M1 chip)

Operating System 11.4

Browser safari 14.1.1

[pixelzoom]

It's unlikely that this is a problem with MathSymbolFont. More likely is that it's a problem with what's rendering text using that font.

In NLD, I believe that the relevant code uses RichText, in NLDBaseView.js:

    const distanceDescriptionText = new RichText( '', merge( DISTANCE_DESCRIPTION_TEXT_OPTIONS, {
      top: distanceStatementAccordionBox.bottom + 15 // padding empirically determined
    } ) );

In Function Builder, it's Text in SlopeInterceptEquatioNode.js:

    // y
    let yNode = new Text( options.ySymbol, {
      fill: options.yColor,
      font: options.xyFont,
      maxWidth: options.xyMaxWidth
    } );

So this is probably a scenery rendering issue, and assigning to @jonathanolson.

@amanda-phet please provide @jonathanolson with details on whether this is blocking NLD, when it needs to be fixed by, priority, etc.

[amanda-phet]

This is not blocking for NLD. I think it would be worthwhile to find all sims affected by it and fix it for all of those at the same time. This is low priority in my opinion, but I wanted an issue about it since it's been happening for a while and would be nice to fix eventually.

[jonathanolson]

Looks like a likely SVG repaint issue, might be specific to this case (so wouldn't happen potentially in other sims even with the same symbol). Can usually be worked around by adding in things that trigger a repaint, like a transparent section (fill: 'transparent') that covers the area.

@pixelzoom thoughts?

[pixelzoom]

I don't have time to investigate this. There are no plans to do redeploy Function Builder. And the sim where this came up was NLD, which is nearing publication.

@amanda-phet if you'd like this to be addressed for NLD, please work with @SaurabhTotey, and consult with @jonathanolson on how to address it -- potentially with the workaround he offered in https://github.com/phetsims/scenery-phet/issues/689#issuecomment-893142804.

If you discover anything that can be applied to other sims, make a list of affected sims, and request a batch maintenance release.

[amanda-phet]

The affected sims that I can consistently reproduce this issue with are:

• Number Line: Distance
• Function Builder
• Equality Explorer: Two Variables

It's possible there are others, but I haven't been able to identify them. I think this should be noted as a potential issue for future sims so that QA has an issue to reference when they encounter it again, but it's very low priority to fix IMO. I will defer to @kathy-phet about how/when/if we should fix it.

[pixelzoom]

No progress in 19 days. @amanda-phet please put this on your list to discuss with @kathy-phet.

[pixelzoom]

From duplicate https://github.com/phetsims/scenery/issues/1416:

This was encountered most recently in https://github.com/phetsims/function-builder/issues/145. But it's a problem that I've encountered repeatedly when using MathSymbolFont.

If a Text/RichText node uses MathSymbolFont, the bounds are wrong. When the node's text changes, this results in part of the node not being erased, or part of the node not being drawn. This problem is consistently reproducible, and ubiquitous in sims that use MathSymbolFont with changing text.

In https://github.com/phetsims/function-builder/issues/145#issuecomment-1137381718, @jonathanolson suggested:

Since this looks like an SVG issue, there's the usual workaround attempt of "put some fill: 'transparent' rectangle around it that somehow forces a repaint in SVG" solution.

That's not a scalable solution. MathSymbolFont is the standard for equations, PhET sims have lots of equations. And we shouldn't have to resort to creating extra rectangles whenever we need to use MathSymbolFont. So it seems like investigating a general solution is more appropriate than this workaround.

Examples where part of the node is not being erases:

Function Builder:

Equality Explorer: Two Variables:

Examples where part of the node is not being drawn. In these 2 examples, the bottom-left part of the "y" is missing.

Function Builder:

Equality Explorer: Two Variables: