I’ve noticed on certain iOS devices when loading in portrait → flipping to landscape → flipping back to portrait. It results in the application not filling the window any longer? I’m on an iPhone XR and my team is seeing the issue on iPhone XS as well. (shown below)
It looks like the window.innerWidth/innerHeight report 414x800 for the first or second? time, then after that it thinks that the app is 414x715. Any easy hacks/css to fix this? my app uses self hosting, but it also happens on playcanvas published builds, example build here, follow repro above to reproduce
I’ve been messing about with calling this.app.setCanvasFillMode, setting height/width on application-canvas directly, setting the style of width/height on application-canvas to 100vw/100vh (seems to get overriden, setting the class on application-canvas to nothing then after a timeout, flipping it back to fill-mode-FILL_WINDOW
I sort of made one of the solutions above work but if the user continues to rotate their phone, it eventually crashes/reloads page
Not sure if I’m understand the graphics device or app functions properly, but I’m not seeing this happen on android, let me know if there are any solutions here that are known, thanks.
One other thing I noticed is that on iPad Pro/Chrome, when flipping orientations, the app doesn’t flip the canvas at all, it just stays in what orientation you loaded in, and shows a big space between bottom of canvas and bottom of page, could use advice here if anyone has tackled.
Well, on my iphone it looks like it fixed the issue! I guess the only downside so far is that the nav bar shows up now (was hiding it before) when going landscape. Thanks for pointing me to that.
I tried it on ipad pro/chrome and interestingly enough it fixed the issue where if I say Load app in landscape -> flip to portrait, it would result in playcanvas canvas still being in landscape orientation, and cutting off the side of the screen, with blank space filling the rest of the height.
But with your hack it does actually flip the orientation properly… but it doesn’t resize the window itself, (see below, white boxes to cover content, don’t mind those)
Weird, didn’t seem to affect current behavior or fix sizing, but touch input is still working. Haven’t tested Android though so maybe it broke touch there. also lol at the comment
/* Oh this feels so hacky. Hides the address bar on iOS when in landscape */
height: 101vh;
So today was mostly spinning my wheels on trying to figure out what’s going on with the iPad not filling the window issue. It’s tricky as there seems to be no way to inspect elements on iOS/Chrome to view the active CSS and tweak/test. So I was stuck with chrome://inspect logs
I’ve been debugging the width/height of the canvas and also window / document/ body width/heights and it looks like the width/height are never swapping based on new orientation as they should.
__start.js reflow debug
var reflow = function () {
console.log('docu element width/height: ' + document.documentElement.clientWidth + "x" + document.documentElement.clientHeight);
console.log('canvas width/height: ' + canvas.width + "x" + canvas.height);
app.resizeCanvas(canvas.width, canvas.height);
canvas.style.width = '';
canvas.style.height = '';
Reflow debug, called on start of the page before I flip (loaded in portrait orientation, so below values appear correct)
LOG docu element width/height: 834x1075
LOG canvas width/height: 1668x2150
Reflow debug called after flipping to landscape mode once, reflow calls twice (canvas that doesn’t fill out width of screen bug occurs here). Expectation here is that canvas width/height should read out as 2150x1668… but two interesting things here- width remains 1668, and the height is set to 1430… so I guess this makes sense why it’s not filling the screen in landscape based on the numbers, and the opposite happens when starting in landscape and flipping to portrait.
LOG docu element width/height: 834x1075
LOG canvas width/height: 1668x2150
LOG docu element width/height: 834x1075
LOG canvas width/height: 1668x1430
I’ve tested without the ScrollTo() / styles.css fix, didn’t seem to have any effect
I’m still unsure of how to go about fixing this, I’ve heard that the iPad can report the wrong values if your meta content in the head element has certain keywords, but I removed those and had the same issue. @yaustar sorry to pester you on this. But does this help narrow anything down on your end or give any leads? This is a browser I need to support and this bug definitely takes away from the experience.
Wish I could but I think there was an issue with iOS permissions or VR, hard to remember at this point but probably can’t afford the bugs that may come with switching over at this point.
Also upon further experimentation, I tried using window.screen.width/height and flipped them depending on current orientation and loaded orientation… my variables changed accordingly with orientation changes but feeding to resizeCanvas had no effect, then tried setting the app.resizeCanvas params to something ridiculous like (50, 50) and it did absolutely nothing.
After testing a little bit more… looks like when pressing the url bar, reflow doesn’t call (based on looking at the console and not seeing my console.logs), but it seems to fill the full window for the “broken” orientation(although it stretches it), then when switching back to the loaded orientation, the original issue then occurs again for that orientation, then if I switch back to the other orientation, it’s no longer stretched.
One other interesting thing is that when clearing my history, if the site is still open during the refresh, it works after im done clearing my history and chrome forces a refresh, until I refresh again.
Also weird that in the post above with the debug of canvas w/h, it calls reflow twice when switching to landscape, the second time reporting a much smaller number for height… after that 2nd resize, when flipping orientation again it keeps that same smaller number and not 2150
LOG docu element width/height: 834x1075
LOG canvas width/height: 1668x2150
LOG docu element width/height: 834x1075
LOG canvas width/height: 1668x1430
