[Safari, Simulation] Background white when it should be red

[ghost]

Test device:

Tycho

Operating System:

iOS 9.3.5 (13G36)

Browser:

Safari

Problem description:

When resistivity and length are maximum and area is minimum, the standard background color appears below the wire and in the upper left corner. The whole background should be red. Thus far, I've observed this issue on the iPad 2 and on the iPad Air 2, but on the iPad Air 2, there is no standard background color rectangle in the upper left hand corner (EDIT by @phet-steele: sometimes the upper left whiteness is there on iPad Air 2). This is for phetsims/QA/issues/53. This issue was found testing the simulation wrapper.

Steps to reproduce:

1. Increase resistivity to maximum.
2. Increase length to maximum.
3. Slowly decrease area to minimum.

Screenshots:

Everything is normal...

Normal...

Normal...

The white spaces... Sometimes the white space in the upper left corner doesn't exist.

It should look like this...

[brroberts1231]

We have also seen similar behavior in Mirror Inputs on Mac OS 10.12 Safari, plus a weird 'drawing' phenomenon in the bottom screen as shown in the gif below.

[ghost]

Seems to be isolated to Safari... Edit: Happening on iPad 2.

[phet-steele]

.....that's cool. @brroberts1231 please make https://github.com/phetsims/resistance-in-a-wire/issues/108#issuecomment-336573764 its own issue.

[ghost]

Just noticed this in the state wrapper on Safari...

[jessegreenberg]

Very weird, thanks for finding this. @jonathanolson do you know why Text might be doing this?

[phet-steele]

@jessegreenberg @jonathanolson it seems significant that the area slider is at a minimum in every screenshot for this issue and #112.

[ghost]

@jessegreenberg @jonathanolson @phet-steele Can confirm. Needs to be minimum. Also, I've only observed this issue in Safari.

EDIT: Only observed THESE issues in Safari. (Both #112 and this one.)

[jessegreenberg]

Thanks @phet-steele and @lmulhall-phet, is this happening in the deployed version?

[jessegreenberg]

@phet-steele said that the first image in https://github.com/phetsims/resistance-in-a-wire/issues/108#issuecomment-336588766 has been happening before, but the second image in https://github.com/phetsims/resistance-in-a-wire/issues/108#issuecomment-336588766 was not.

[jessegreenberg]

In https://github.com/phetsims/ohms-law/issues/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?

[jessegreenberg]

I can't fully reproduce this. Occasionally I see a window in the top left corner of the screen, but I can't get it to look like the examples with the large spaces at the top and bottom of the screen.

To see the small window in the top corner, I move resistivity to max, length to max, then area slowly to min. Then after ~5 seconds the small window in the top left corner appears.

[jonathanolson]

Very weird, thanks for finding this. @jonathanolson do you know why Text might be doing this?

Probably related to https://github.com/phetsims/resistance-in-a-wire/issues/112. Might be worth trying rootRenderer=canvas to see if that reproduces or not.

I don't recall if this has been tried, but you could try increasing the font size (with a corresponding decrease in scale), or do the reverse. There's a decent chance that may help.

A somewhat-more probably foolproof but tricky way would be to rasterize the symbols into images (with mipmapping enabled probably) and scale them up/down. This may result in fuzzy borders when really scaled up big (slightly, depending on rasterization size), and would add some additional code complexity.

If the above rasterization approach works and you really want sharp edges (at the cost of code complexity), it may be possible to break symbols into multiple square tiles and rasterize those independently (so we don't create a too-big Canvas).

[jessegreenberg]

renderer: canvas does fix this issue (to the extent I could reproduce anyway).

I don't recall if this has been tried, but you could try increasing the font size (with a corresponding decrease in scale), or do the reverse. There's a decent chance that may help.

A few solutions for scaling the letters was recently investigated in #28, Ill take a look there to see what has been tried.

[jessegreenberg]

In https://github.com/phetsims/resistance-in-a-wire/commit/56b3170de6e23080d0bdfec5f1ed407eeb568467 (the fixing commit for #28) the font size was significantly reduced and the scale increased. This improved the performance on for Firefox, but may have introduced this issue (and maybe also #112).

[jessegreenberg]

I tried toImage on the text, the result is surprisingly clear, not seeing fuzzy borders or pixelation. But I am still seeing empty space when the 'R' gets very large.

[jessegreenberg]

Here is what I tried in symbolTexts.forEach:

      text.toImage( function( image ) {
        var letterImage = new Image( image, { scale: 1 / 40 } );
        letterNode.addChild( letterImage );
        letterImage.center = entry.center; 
      } );

The original text was scaled up by 40 to make it look less pixelated.

[jessegreenberg]

Fixed with the above commit, tested with safari 10.0.1 and safari on iOS 9.3.5. Not quite as smooth on safari 10.0.1 after the change, but still feels fluid when dragging slider. Seems acceptable to me, but would be good to have verified by QA team.

[phet-steele]

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