Games are stuck offscreen in some iOS browsers

Bugs will be moved here once resolved.

Post » Wed Feb 17, 2016 5:44 am

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:
Image Image Image

This report was previously closed with commentary:

scirra.com/forum/games-are-stuck-partially-offscreen-when-opened-from-twi_p1013485?#p1013485
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)
Code: Select all
   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;
   };


(index.js lines 90–93)
Code: Select all
      // 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);
      });


A simple fix would be to use window.innerHeight instead of jQuery(window).height() on all iOS browsers.
B
6
S
1
Posts: 4
Reputation: 408

Post » Tue Mar 22, 2016 2:49 pm

This should be fixed in the latest betas.
Scirra Founder
B
395
S
232
G
88
Posts: 24,371
Reputation: 193,772

Post » Mon Jun 27, 2016 4:03 am

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...?
B
12
S
1
Posts: 10
Reputation: 624


Return to Closed bugs

Who is online

Users browsing this forum: william31 and 1 guest