Scaling Issues on ios with html GUI

Here is the project: https://playcanv.as/p/jCuKtqtQ/

It works on desktop and android fine. I know that the slide out menu doesn’t fit the screen, it is temporary.

The problem is that, on ios, it zooms in to the bottom-left corner of the screen. Weird.

I have tested other projects on the showcase page and they all work fine on ios. If anyone is up for it and knows I will pay you £20 or something, paypal, to just write it in a word document or something so i can refer to it, nothing fancy. Can just be a line or two if it fixes it…

Kind of urgent and the gui needs to remain html.

I know it is something to do with css position on the slide menu div. When i remove transform modifiers (that move the slide menu) it works fine on ios. But this has to be in the code or it will not work as designed.

Thanks.

Perhaps you need to add the -webkit- prefix for your transform property in CSS. So instead of just using transform do this:

-webkit-transform: ...
transform: ...

nope, didn’t work. Sorry. Good idea though. May just move to Babylon js tbh. Will wait another day or so for an answer.

Are you talking about your UI? If it’s HTML and CSS then you can move to whichever WebGL engine you like, it won’t solve your problem. Unfortunately I don’t have an iOS device available at the moment to test this. But if you say that it works if you remove transform then my guess is that you are using CSS properties that need to be prefixed with -webkit- in iOS. That includes transform and you need to check which other CSS properties need a prefix as well.

One thing to try is the embed URL. Does this work better for you in iOS?

https://playcanv.as/e/p/jCuKtqtQ/

It works. But when I embed it into a website it doesn’t. I have noticed something as well. After it loads, it just continually stretches on the y-axis. I removed all css references and javascipt code that resizes the menu div and this still occurs.

It seems to me that when this specific application is embedded into an iframe (like this URL does: https://playcanv.as/p/jCuKtqtQ/ ) that’s when it starts to break. It’s like it’s constantly resizing and readjusting stuff.

It’s hard to debug this without having access to the project and trying some stuff out. Can you add me to your project? My username is ‘vaios’.

What I’d try is strip everything from the project until it stops doing it so we can figure out which bit is causing all the readjustment on resize.

Sent a request now… Thanks

So I think I’ve found the problem. In your CSS asset you do:

#editorLarge {
    ...
    transition: .2s;
}

I think this is wrong, you need to say which properties should be transitioned. Anyway if you change this to

#editorLarge {
    ...
    transition: transform .2s;
}

then it should work. Might be worth adding the -webkit- prefixes too:

#editorLarge {
    ...
    -webkit-transition: -webkit-transform .2s;
    transition: transform .2s;
}
1 Like

@09millarda So did @vaios’s solution work for you?