Canvas not resizing as expected, overflowing parent and not fitting the screen

Questions
1

The canvas size grows out of the bounds of it’s parent container, like it’s enforcing an aspect ratio. I don’t get this behavior with the

The canvas fails to resize consistently with the window:

  • If the window is expanded vertically, the canvas resizes to fill. If the window is then shrunk vertically the canvas doesn’t resize to shrink with it, overflowing it’s parent
  • If the window width is increased the canvas expands vertically, overflowing it’s parent

Video showing how it doesn’t resize to fit the parent, and how it overflows it: https://i.imgur.com/ncGCTOZ.mp4

My Code:

    var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false });

    const scene = new BABYLON.Scene(engine);

    //... camera & light stuff ...

    canvas.onresize = function() {
        engine.resize();
    };
    window.onresize = function() {
        engine.resize();
    };

    <q-page style="max-height: calc(100vh - 32px)"> <!-- Has a matching min-height  -->
        <canvas ref="renderCanvas" class="render-canvas" width="100%" height="100%"></canvas>
    </q-page>

    .render-canvas {
        min-height: inherit;
        width: 100%;
    }

    "babylonjs": "^4.2.0",
    "babylonjs-gui": "^4.2.0",
    "babylonjs-loaders": "^4.2.0",
    "babylonjs-materials": "^4.2.0",
    "babylonjs-post-process": "^4.2.0",
    "babylonjs-serializers": "^4.2.0",

How can I get the size to just fit the parent element?

2

Well, guess I’m self answering this one. The canvas needs css setting it’s height (ie. 100%)

2 Likes