[mirror inputs] Drawing phenomenon when area is minimum

[ghost]

Test device:

MacBook Air (13-inch, Early 2015)

Operating System:

macOS Sierra 10.12.6 (16G29)

Browser:

Safari Version 11.0 (12604.1.38.1.7)

Problem description:

There is a "drawing" phenomenon when area is minimum. This was discovered testing mirror inputs wrapper. This is for phetsims/qa/issues/53. This is similar to /issues/108.

Steps to reproduce:

1. Slide the area to it's minimum value.
2. Move cursor around.

Screenshots:

[phet-steele]

@jessegreenberg...I'm going to jump the gun on assuming we will need help from @jonathanolson. Co-assigning to him.

[jessegreenberg]

In phetsims/ohms-law#68, we added preventFit to fix an issue where components were jostling during use. Really just a shot in the dark, but could that be related?

[jonathanolson]

This looks like the browser is having issues with how large the font ends up being. Maybe the mouse movement triggers the refresh on the top one (no clue).

Does this happen with rootRenderer=canvas?

[jessegreenberg]

@jonathanolson I cannot reproduce this problem with rootRenderer=canvas, that seems to fix it.

[jessegreenberg]

@jonathanolson is renderer: canvas for the letters in this sim a recommended fix?

EDIT: verified that fixes the problem for safari, not sure about implications for other platforms.
EDIT2: Just tested chrome, performance is a bit worse when R is very large with renderer: canvas.

[jonathanolson]

Forcing that may affect performance and/or font/shape antialiasing.

@ariel-phet, should I look into workarounds for the specific case, so that we wouldn't have to force Canvas in this situation?

[jonathanolson]

See #108 (comment) for potential workarounds.

[ariel-phet]

@jonathanolson I am fine with forcing canvas unless it is brutal on performance. My quick look at font shape/aliasing seemed acceptable. I would rather not look into work around if not necessary.

@jessegreenberg perhaps only force canvas on safari? I would be fine with that

[jessegreenberg]

One recommendation from #108 was to rasterize text to images and scale that way. I tried that in #108, but I am still seeing this problem

[jessegreenberg]

In #108, this was fixed by rendering with canvas when using safari. Marking as fixed, pending testing.

[phet-steele]

Fixed in macOS 10.13.1, iOS 11.0.3, and iOS 9.3.5.