Resize triggers sudden camera motion in mobile iOS

Questions
,
1

Hello!

I own a quite old iPhone (5) and when the screen resizes (which is pretty much a scroll since the mobile browsers have this top action bar) the camera starts moving by itself until all the meshes disappear from the scene…I cannot reproduce the issue on an android device neither in the desktop version.

Any clue why this happens or how to prevent it? I could remove the onresize event but leads to empty white spaces since the iframe is not updating its size.

I am using effect composer. Please visit the following pastebin to see the URL of the website (link will expire)

https://pastebin.com/EiDahuDs

Thanks!

2

It’s a bit hard for me to understand this statement. In a resize function, you normally recompute the camera’s projection matrix and resize the renderer/effect composer. Both actions have no effect on the camera’s transformation (translation, scale, rotation). So I don’t think the camera is actually moving through 3D space. Is it possible to show a small video of what’s happening?

Sry, I don’t own an iOS device so I’m not able to reproduce the issue.

3

I just discovered it also happens in newer iphones…Please follow the link to access a video showing the situation.

https://pastebin.com/BnQQ9tp0 (will expire)

My resize function is as follows, no more, no less:

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    if(postprocessing){
        postprocessing.rtTextureDepth.setSize( window.innerWidth, window.innerHeight );
        postprocessing.rtTextureColor.setSize( window.innerWidth, window.innerHeight );
        postprocessing.bokeh_uniforms[ 'textureWidth' ].value = window.innerWidth;
        postprocessing.bokeh_uniforms[ 'textureHeight' ].value = window.innerHeight;
    }

    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer2D.setSize( window.innerWidth, window.innerHeight );
    composer.setSize( window.innerWidth, window.innerHeight );

}

Thanks!

1 Like
4

Thanks for sharing the video! Indeed that looks very strange :thinking:. And yeah, your resize code looks fine. Nothing unusual…

The next thing I would verify is how often is onWindowResize() actually executed. Consider to place console.log( window.innerWidth, window.innerHeight ); into the function and then inspect the log. If you connect your iPhone to a computer, you will be able to do so, see

https://medium.com/@mattcroak718/debugging-your-iphone-mobile-web-app-using-safari-development-tools-71240657c487

5

Thank you so much for giving me the hint of console.log( window.innerWidth, window.innerHeight );.
After debugging it I have discovered the following:

  • iOS fires resize constantly after the first resize, its an event that NEVER stops
  • After the first resize event, window.innerWidth grows indefinitely until it reaches a moment where three-js crashes.

To fix this situation, I have added a flag to detect if the device is iOS and only update window.innerHeight. Is a quite ugly solution because the website will not update the width if the orientation of the device changes…but well…at least the scene doesnt disappear.

Any other idea about how to solve this?

Thanks!!!

1 Like
6

No, not at the moment. It sounds like a bug if window.innerWidth behaves that way. I think three.js fails at some point because the internal canvas used for rendering will be too large. The related framebuffer has a maximum size (defined by browsers) that can’t be exceeded.