<!DOCTYPE html> chops scene at the bottom

Tutorials and tips
1

I got tired at looking at all the firefox warnings. This one:

This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”.

seemed easy enough to make go away. I just add this as the first line, and the warning was gone. It was several runs to notice that the scene did not fill the whole window, but only about 90% vertically. I could not have a simpler page:

<html>
<head>
    <meta charset="UTF-8">
    <title>       </title>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="babylon.inspector.bundle.js"></script>

    . . .

    <style>
         #renderCanvas{ width: 100%; height: 100%; }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        . . .
    </script>
</body>
</html>

There is resize code, but also pretty simple:

this.scene.executeWhenReady(() => {
    window.addEventListener("resize",() => { engine.resize(); }); // for desktop
    engine.runRenderLoop(() => { this.scene.render(); });
});

I fixed it by just ripping it back out. Just left this for future searcher who might have made a whole bunch of changes at the same time, and cannot isolate the issue.

1 Like
2

Here’s the kind of CSS that I use and the layout is the same whether using doctype html or not. I think it’s different default CSS settings that are causing the difference.

html, body, #renderCanvas {
    padding: 0;
    margin: 0;

    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    border: none;
    outline: none;

    touch-action: none;
    overflow: hidden;
}
1 Like