Games are stuck partially offscreen when opened from Twitter

Problem Description

In Facebook and Twitter's in-app browsers on iOS, games are not vertically centered; they're offset, which can result in them being stuck off-screen if they're too tall.

Attach a Capx

dl.dropboxusercontent.com/u/96439/Games/Construct2/browser_bug.capx dl.dropboxusercontent.com/u/96439/Games/Construct2/browser_bug.capx

Description of Capx

"New empty project" with no changes.

Steps to Reproduce Bug

• Create a "New empty project"
• Export as HTML5 website, either "Normal style" or "Embed style"
• Host it somewhere (I used Dropbox)
• DM it to yourself on Twitter, or post it privately on Facebook
• Open it in Twitter or Facebook's in-app browser

Observed Result

The game is shifted down from center by about 53 points (106 Retina pixels).

Expected Result

The game should be centered vertically.

Affected Browsers

All of these are iOS in-app browsers based on WebKit.

• Twitter: YES
• Facebook: YES
• TweetBot: YES
• Safari: NO
• iOS 9 Safari View Controller (used in Evernote and others): NO
• Facebook Messenger: NO
• Google: NO
• Pocket: NO

Operating System and Service Pack

iPhone 5 running iOS 9.2.1

Construct 2 Version ID

Release 221

Notes

When a game uses touch screen controls, the user can't scroll the viewport, so an offscreen game is stuck there.

Because this happens in Twitter's in-app browser, you can view the problem in this tweet:

twitter.com/kelseyhigham/status/696117704931971072 twitter.com/kelseyhigham/status/696117704931971072

Screenshots of Safari, Twitter, and Facebook:

Construct 2 centers the game in what the browser tells it is the window size. So it appears Twitter and Facebook are giving it the wrong viewport size. I think you should report it to them?

That's what I thought at first, but they're correctly giving window.innerHeight in real-time, which you can see if you open this page in their browsers:

ryanve.com/lab/dimensions ryanve.com/lab/dimensions

Construct 2 is using a different method to determine window size. When I edit c2runtime.js and index.html to use window.innerHeight instead of jQuery(window).height(), the game opens at the correct height, both in portrait and landscape:

(c2runtime.js lines 3381–3394)

	function window_innerWidth()
	{
//		if (typeof jQuery !== "undefined")
//			return jQuery(window).width();
//		else
			return window.innerWidth;
	};
	function window_innerHeight()
	{
//		if (typeof jQuery !== "undefined")
//			return jQuery(window).height();
//		else
			return window.innerHeight;
	};[/code:2pod8tc3]

(index.js lines 90–93)
[code:2pod8tc3]		// Size the canvas to fill the browser viewport.
		jQuery(window).resize(function() {
//			cr_sizeCanvas(jQuery(window).width(), jQuery(window).height());
			cr_sizeCanvas(window.innerWidth, window.innerHeight);
		});[/code:2pod8tc3]

I assume Construct 2 uses the jQuery functions for compatibility with other browsers, but that's messing it up for these browsers.

It may also be messing it up for iPhone Safari landscape, which also gives a correct value for [b]window.innerHeight[/b].