Chrome iOS

[Snouto]

Yo Microsoft dudes

Quick question - has anyone experienced scene window resizing issues with Chrome on iOS? I've been getting reports that when resizing our scene in Chrome iOS that the scene becomes warped, such that it's either too wide, too high, or a scale factor of the two.

I was unable to replicate on my iPhone X but I could replicate on my iPad pro 10" - the scene loads fine to begin with but as soon as the device is rotated it goes to hell.

It's been a right royal pain in the a-hole to debug Chrome on iOS but I did finally get somewhere using Vorlon, such that I can see when rotating the device that in Chrome the canvas width and height values are not the same as with Safari iOS. To some extent - a small extent - this is to be expected given different window chrome, however the difference is substantial e.g. on iOS Safari, where the scene is not warped/stretched, the size of the canvas when in landscape orientation is 2224x1418, however in chrome it's 1668 x 1994, this is despite the actual sizes reported in the layout as being 1112x709 Safari and 1112 x 719 Chrome iOS.

What the smeg is going on? Any idea anyone (paging @Wingnut who may have seen this before in the millions of tests he's ran).

Cheers!

p.s. iOS version 11.2.6, Chrome iOS version 64.0.3282.112

[Guest]

Glad that Vorlon helped you

This seems to be really browser related and may need to file a bug in Chrome bug database. 

perhaps you can try to manually force the canvas.width and height to the value of the layout? And then call an engine.resize() ?

[Snouto]

Welp that does indeed seem to solve the issue, at least on my iPad Chrome with the limited testing I've done so far. For future reference I did this:

window.addEventListener("resize", function () {
   // set the canvas width and height according to the size of the window after a resize. This could target only Chrome on iOS using Agent sniffing if required
   $("#renderCanvas").width($( window ).width()).height($( window ).height());
   // Now do the usual resize.
   engine.resize();
});

because I'm far too lazy these days to do this sort of thing without jQuery.

I presume this works because - looking at the BABS code - the resize() method will first take the canvas clientWidth and clientHeight if the canvas already exists, before then applying a hardwareScalingLevel scale factor and updating the canvas HTML element. So if we manually set the clientWidth and clientHeight as above, this will be the value the resize() method works from, thus side-stepping any bugs with Chrome iOS whereby the clientWidth and clientHeight values are being incorrectly reported.

I'll test this elsewhere and in all the other browsers we're supporting on desktop and mobile and report back if there are any nasty side effects.

Cheers @Deltakosh and @Wingnut, I wouldn't have expected it necessary to do this myself!

[Wingnut]

Look at that.  I got two "mentions" and didn't say a word. 

(I guess we DID do a little chat behind the scenes, but, even there, I was clueless and provided 0 helpful ideas)  heh

(Wingy hugs Snouto)    Thx for showing us that jQuery line-of-magic.

[Snouto]

Just now, Wingnut said:

Look at that.  I got two "mentions" and didn't say a word. 

(I guess we DID do a little chat behind the scenes, but, even there, I was clueless and provided 0 helpful ideas)  heh

(Wingy hugs Snouto) 

As ever you were willing to help dude, I always thank those who would offer their time for an internet stranger

[Wingnut]

  thx.  Technically, we're all on "Team Us"... but... you know... capitalism... makes SOME folks distrust the "thems".

But not for me.  Snouto, you're another me... one of us... and WE need to keep our projects moving, right?  To assist ONE team project assists ALL team projects.  

(I learned this philosophy... from a message I found in a giant fortune cookie.)  heh

[Snouto]

Absolutely, in fact one of the reasons I chose Babylon for this client project over say Threes or PlayCanvas was the existence of this extremely valuable forum. As a seasoned developer I put a very high value on publicly available resources to turn to when the going gets tough, and even after developing for about 20 years I can comfortably say the coin gets tough in nearly ever project I'm involved with (that probably says a lot more about me than I intended!).

Thanks again, I'll be sure to update this thread further if all this back-patting turns out to be premature heh!