Games are stuck partially offscreen when opened from Twitter

Bugs will be moved here once resolved.

Post » Sun Feb 07, 2016 1:02 am

Message: Kelsey can only post plain text URLS until they have 500 rep. 2 URLS modified. Why?
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
https://dl.dropboxusercontent.com/u/96439/Games/Construct2/browser_bug.capx https://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:
https://twitter.com/kelseyhigham/status/696117704931971072 https://twitter.com/kelseyhigham/status/696117704931971072

Screenshots of Safari, Twitter, and Facebook:
Image Image Image
B
6
S
1
Posts: 4
Reputation: 408

Post » Tue Feb 09, 2016 5:36 pm

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?
Scirra Founder
B
398
S
236
G
88
Posts: 24,428
Reputation: 194,620

Post » Wed Feb 10, 2016 12:04 am

Message: Kelsey can only post plain text URLS until they have 500 rep. 1 URLS modified. Why?
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:
http://ryanve.com/lab/dimensions/ http://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)
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);
      });


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 window.innerHeight.
B
6
S
1
Posts: 4
Reputation: 408


Return to Closed bugs

Who is online

Users browsing this forum: No registered users and 1 guest