Three.js: Resizing Renderer (on orientation change) corrupts window.innerWidth/Height

[PeterKey]

Description of the problem

I may have discovered a very strange bug:

If you adjust the three.js (full-screen) canvas size by calling renderer.setSize(window.innerWidth, window.innerHeight) on resize, switching from landscape to portrait mode messes up window.innerWidth/Height.

Yup, it actually seems to change what window.innerWidth/Height returns.

I have set up a small test case inside this repository.

1. Open test.html
2. Fire up Devtools
3. Toggle Device Toolbar
4. Select a phone
5. Switch from landscape to portrait mode and observe console output

This bug also occurs on my android phone with Chrome. It messes up a project real bad I am currently working on and I was able to get rid of the bug by excluding the line renderer.setSize(window.innerWidth, window.innerHeight).

I can add additional information and do further testing if this is not intended behaviour and I didn't make a mistake.

Three.js version

• [ ] Dev
• [x] r89
• [ ] ...

Browser

• [ ] All of them
• [x] Chrome [v. 63.0.3239.108 (Desktop), v. 63.0.3239.108 (Android)]
• [ ] Firefox
• [ ] Internet Explorer

OS

(As far as I was able to test it)

• [ ] All of them
• [ ] Windows
• [x] macOS
• [ ] Linux
• [x] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[Mugen87]

I've transferred your code to this fiddle and enhanced it a bit: https://jsfiddle.net/bja0cpge/5/

As far as i can see, i get valid results in the console even if i change the orientation of the emulated device.

switching from landscape to portrait mode messes up window.innerWidth/Height.

What do you mean with "messes up"? What values do you get? And what values do you expected?

[PeterKey]

Thank you for taking your time investigating this!

This is the console output on my sample project.

width: 412 height: 732      # portrait mode
width: 732 height: 412      # landscape mode
width: 732 height: 1301     # portrait mode
width: 732 height: 412      # landscape mode

The first time I switch from landscape to portrait mode the values aren't correct anymore. It should be 412x732 instead of 732x1301.

Your fiddle seems to work fine for me as well. I actually wasn't able to replicate this in a fiddle, that's why I created the repository.

Edit: I updated the project with your code and I can still observe this behaviour

[Mugen87]

In any event, i don't think this is a three.js issue. It is not a bug in the library if window.innerWidth and window.innerHeight return wrong values. I suggest you should post a help request at stackoverflow.

[mrdoob]

Your fiddle seems to work fine for me as well. I actually wasn't able to replicate this in a fiddle, that's why I created the repository.

That means that the error is in your code and not in the library or browser.

[glegenty]

I have the same issue also only on chrome.

[PeterKey]

I am happy that I'm not the only one. This is the related Stackoverflow post. Until we can't confirm that this is a three.js issue we should continue the discussion there. _Please upvote on SO for traction_ 😌

[ItsTehStory]

I just answered on your Stackoverflow @PeterKey! I don't use three.js and I ran into the problem so not a three.js problem ;)
EDIT: This is a Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=833440&can=2&start=0&num=100&q=window.innerWidth&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=

[philipp7pc]

I would like to pick this up, in the hope somebody has isolated how iOS devices hand over the viewport pixel sizes to - in this case three - .js
Did anybody find a different workaround than coloring the main's background the same color of the render's background. It's kind of immanent even on the three.js samples if you open them on an iPhone.

[mrdoob]

@philipp7pc Can you share a screen recording that shows the issue you're trying to describe?