Games are stuck offscreen in some iOS browsers

  • Problem Description

    In some iOS browsers, games aren't vertically centered on the screen.

    These browsers report a correct window.innerHeight, but an incorrect jQuery(window).height(). Construct 2 uses the jQuery method to position games in the viewport.

    This is a known issue (closed, wontfix) in jQuery. It returns an incorrect value for jQuery(window).height() on iOS, to accommodate devices with always-visible scroll bars:

    github.com/jquery/jquery/blob/a644101ed04d0beacea864ce805e0c4f86ba1cd1/src/dimensions.js#L20-L25

    github.com/jquery/jquery/pull/764#issuecomment-5544597

    It happens in browsers where the toolbars shrink when you scroll, similar to Safari. So future browsers will have that problem.

    Attach a 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, post it privately on Facebook, or paste the URL as a comment on a Dropbox file
    • Open it in one of the listed browsers

    Observed Result

    The game is shifted down from center by 54px, because it's being centered for the 568px tall screen returned by jQuery(window).height().

    Expected Result

    The game should be centered in the 460px tall viewport, as returned by window.innerHeight.

    Affected Browsers

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

    • Twitter: YES
    • Facebook: YES
    • DuckDuckGo: YES
    • Dropbox: YES
    • TweetBot: YES
    • Mercury Browser: YES
    • Video D/L: YES
    • Safari: NO
    • iOS 9 Safari View Controller: NO
    • Facebook Messenger: NO
    • Google: NO
    • Chrome: NO
    • Pocket: NO
    • Firefox: NO
    • Opera Mini: NO
    • Opera Coast: NO
    • WordPress: NO
    • LINE: NO
    • iCab Mobile: NO
    • Narwhal: NO
    • Apollo Browser: NO
    • Dolphin: NO
    • Puffin: NO
    • UC Browser: 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.

    Screenshots of Safari, Twitter, and Facebook:

    This report was previously closed with commentary:

    scirra.com/forum/games-are-stuck-partially-offscreen-when-opened-from-twi_p1013485?#p1013485

    [quote:39f0nipj]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?

    Again, all affected browsers give a correct value for window.innerHeight. They give an incorrect value for jQuery(window).height(), because jQuery has a known bug (closed, wontfix) on iOS:

    github.com/jquery/jquery/blob/a644101ed04d0beacea864ce805e0c4f86ba1cd1/src/dimensions.js#L20-L25

    As proof that that's the source of the issue, 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, in all affected browsers:

    (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:39f0nipj]
    
    (index.js lines 90–93)
    [code:39f0nipj]		// 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:39f0nipj]
    
    A simple fix would be to use [b]window.innerHeight[/b] instead of [b]jQuery(window).height()[/b] on all iOS browsers.
  • This should be fixed in the latest betas.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Problem description:

    I have a problem similar to this behavior, but in the horizontal direction; the session window is shifted 50% to the right in Safari, thus making it unusable.

    I am using Construct R227, session exported to HTML5, running on new Dell PC with Windows 10, under Safari 5.1.7 for Windows.

    All other browsers are fine.

    I tried to follow the advice above with the code change in c2runtime and index, but there are not these lines (3381–3394) in my c2runtime; it finishes at line 1457. I am able to change/update the index file though. I am not a programmer, so unless the solution is clear, I am stuck.

    Can anybody help??

    It says this should have been fixed, does not look like it was...?

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)