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.