Jump to content

Chrome iOS


Snouto
 Share

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

(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.

Link to comment
Share on other sites

Just now, Wingnut said:

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

(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 :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...