Three.js: DIV container height is increasing on window resize event

Created on 24 Jan 2017  路  1Comment  路  Source: mrdoob/three.js

Description of the problem

When three canvas is embedded in div container the height of the div is increasing every time window.resize event occurs. I have checked it on OSX and Linux, the same behavior has been observed. The resize handling function is as follows:

window.addEventListener( 'resize', function onWindowResize() {
                    w = container.clientWidth; 
                    h = container.clientHeight; 
                    // console.log( " w : " + w + " h : " + h);
                    renderer.setSize( w, h );
                    camera.aspect = w / h;
                    camera.updateProjectionMatrix();
}, false );

WebGLRenderer renderer is used. The quick fix is renderer.setSize(w, h-4) (h-6 on OSX ).
Complete code listing to replicate the issue can found on stackoverflow.
The source of WebGLRenderer shows that setSize is multiplying width and height by pixelRatio value is it possible that this messes the container height? I have checked with renderer.setPixelRatio( 1 ); but it does not solve the issue.

Thanks for your feedback.

Three.js version
  • [ ] Dev
  • [x] r83
  • [ ] ...
Browser
  • [ ] All of them
  • [x] Chrome
  • [x] Firefox
  • [ ] Internet Explorer
OS
  • [ ] All of them
  • [ ] Windows
  • [x] Linux
  • [ ] Android
  • [x] IOS

Most helpful comment

I just learned that to fix it I need to adjust `line-height' css property of the Div to 0px.

>All comments

I just learned that to fix it I need to adjust `line-height' css property of the Div to 0px.

Was this page helpful?
0 / 5 - 0 ratings