'A strange interaction between canvas, ResizeObserver and FlexBox

I am trying to get a self-resizing canvas following the recipe here (end of section 4, under "What to do instead"). So I have a ResizeObserver hooked up to watch for changes on my canvas element. The canvas element has 100% height and is inside of a container element which is itself a child of a flex element. This exact set of circumstances seems to lead to a chain reaction in which the canvas's height continually increases over time.

The reason I want this is because I want the canvas to fill its container, hence the 100% height, but I don't want its actual rendered content to be stretched by the browser.

Here's a JSFiddle and here's a minimum example in code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body
        {
            display: flex;
        }

        main
        {
            max-height: 1000px; /* not necessary, for convenience */
        }

        canvas
        {
            height: 100%;
            background-color: pink;
        }
    </style>
</head>
<body>
    <main>
        <canvas></canvas>
    </main>

    <script>
        let canvas = document.querySelector("canvas");
        let renderer = canvas.getContext("2d");

        let resizeObserver = new ResizeObserver(render);
        resizeObserver.observe(canvas);

        function render()
        {
            renderer.canvas.height = renderer.canvas.clientHeight;
        }
    </script>
</body>
</html>
canvasflexboxresize-observer


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions