Firefox anti-aliasing allows obscured lines and equations to be seen

[KatieWoe]

For phetsims/qa#287 and phetsims/qa#286
Only seen on firefox Mac 10.14 so far. It seems that sometimes, when a line or equation is "hidden" behind another, it can be seen somewhat. Very minor. This was first noticed with the green text of the y=x line behind the active line seen here (rtl not needed). Also seen in the game when a green line is layered over a black line.

[pixelzoom]

My best guess is that Firefox text anti-aliasing has translucent pixels around the edges, which would cause what is behind it to show through. @jonathanolson does that sound plausible, or do you an explanation?

In any case, my recommendation is to ignore this. If anything, it's kind of nice, because it cues you to the fact that there's more than one line in the same location.

[pixelzoom]

@KatieWoe clarification about the title of this issue, which is "Firefox may have different line sizes". This doesn't seem to have anything to do with line, it's the equation on the line. Is that true, or am I missing something subtle in the screenshot above?

[KatieWoe]

I meant line as in both the lines and the lines that make up text.

[pixelzoom]

Ah yes, much more difficult to see (for me) with the line. Below is a screenshot using Digital Color Meter to zoom in on the line, and there's clear some green around the edges. This still looks like a symptom of how Firefox does anti-aliasing.

[KatieWoe]

I honestly only noticed that the line looked a bit more fuzzy, not the color.

[pixelzoom]

There's a little bit of this in every browser that I've looked at. For example:

macOS + Chrome with y = x off:

macOS + Chrome with y = x on:

When y = x is on, you can clearly see some green in the 'y' shown in Digital Color Meter.

[KatieWoe]

Overall, I would agree that this doesn't need anything done. Just documenting.

[pixelzoom]

I talked with @jonathanolson about this on Slack. It's definitely anti-aliasing. It's probably more pronounced on Firefox because it uses a different rendering engine. Using a different scenery renderer option for lines and equations might change the behavior. But I'd have to investigate, and that doesn't seem like time well-spent, because this issue is a (very minor) cosmetic blemish and causes no usability issues. So I'm recommending that we close this as "won't fix".

@amanda-phet your opinion?

[amanda-phet]

I agree that it's almost a benefit, as @pixelzoom says, because it indicates that there are two layered equations/lines. Thank you for diving into the cause, and since it is an anti-aliasing issue and not something else (like the other string issues I was watching) I am happy to leave it as-is.

Thanks @KatieWoe for finding and documenting.

[pixelzoom]

@KatieWoe thanks again for reporting.

Closing.