0 Favourites

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 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • 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].
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)