The sim suddenly enlarges on iPad 3 iOS 9

[jbphet]

I was testing the master version of this sim after making some changes, and on Disessa, which is an iPad 3 running iOS 9.0.2, I kept hitting a case where the screen would suddenly appear to zoom way in. After a bunch of testing to try to find a way to duplicate consistently, I finally figured out that it happens regardless of what the user does. So, to duplicate this, all you have to do is load the sim and wait about 25 seconds. Here's a screenshot of what it looks like right after it enlarges:

I didn't find any obvious ways to get out of this situation, so I tried reloading. The first reload looks like this:

After reloading a second time, the sim behaves normally for the same 25 seconds or so, and then enlarges again.

[jbphet]

Seems scenery-ish to me, so I'll assign to @jonathanolson for now and he and I can take a look when he is in tomorrow.

[pixelzoom]

Dev meeting: test on iOS 9.1.

[jbphet]

I upgraded the iPad 3 (Disessa) to 9.1, and the problem did not go away.

[jbphet]

Tested this on an iPad 2 (Tycho) running iOS 9.0 and the problem occurs there too. The problem does not occur on an iPad 2 (@jbphet's test iPad) running iOS 8.3.

[jonathanolson]

Doesn't occur in built sims, and is fixed with require.js-mode by including some of the standard production template headers. Specifically this one prevents the behavior:

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1"/>

I'll briefly dig a bit deeper to try to find out the root cause. Also, there is a noticeable gap on the bottom and right where the navbar doesn't extend to the screen edge fully (it's white), and it's probably Safari trying to do an auto-detection of how to display the content (this sim in particular triggers something), and it changes it once it thinks the page is fully loaded.

[jonathanolson]

This looks like it was triggered by the length of the heartbeat div. After the sim resizes incorrectly, removing the heartbeat div also brought it back to normal.

I added more advanced styling so that it wouldn't affect the layout code, and tested OS X 10.11 Safari and iOS 9.1 Safari (MBA and iPad3), and 4-5 minute delays didn't trigger the symptoms of phetsims/joist#140.

@samreid, would you be able to review my changes to make sure this didn't break the heartbeat div's purpose?

[samreid]

Testing graphing lines with this line commented out reveals a problem after 60 sec in Safari OS X Version 9.0.1 (11601.2.7.2)

this.heartbeatDiv.innerHTML = Math.random();

Re-enabling the above line, with the styles applied to the heartbeat div the pause goes away. So I think these styles are safe and good. Closing.