Canvas not rendering when loading page on Firefox

[dominik1106]

Hey, I've encountered a weird issue with components/nodes not rendering correctly. On Firefox when first loading the page, it renders correctly, if I (hard) reload with CTRL+F5 it renders correctly as well. However if I just normally reload the page, the grid renders only after either changing the tab and back; Or with dragging enabled, clicking anywhere on the Grid.

This issue seems to be specific to Firefox, it does not occur on Brave. The useEffect fixes the issue as well, however I feel like it's not a good idea to use a hacky solution like this. At first I thought that maybe the image loading (2.5mb so relatively big) was causing it, however even without it the bug still occurs.

System-details:
OS: Linux (PopOS)
Firefox version: 140.0.1 (64-bit)
Node: v22.14.0

It's a vite project with the following dependencies:

"dependencies": {
    "@tailwindcss/vite": "^4.1.11",
    "konva": "^9.3.22",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-konva": "^19.0.7",
    "tailwindcss": "^4.1.11",
    "use-image": "^1.1.4"
  }

My code:
// VTTCanvas.tsx

import {
    Group,
    Layer,
    Stage
} from "react-konva";
import { Stage as KonvaStage } from "konva/lib/Stage";
import { Group as KonvaGroup } from "konva/lib/Group";
import URLImage from "./URLImage";
import testMap from "../assets/test-map.jpg";
import MapGrid from "./MapGrid";
import { useEffect, useRef, useState } from "react";

export default function VTTCanvas() {
    const stageRef = useRef<KonvaStage>(null);

    /* 
        Fix for Firefox not rendering correctly on load, 
        force redraw after mounting component
    */
    useEffect(() => {
        const timer = setTimeout(() => {
            stageRef.current?.draw();
        }, 20);

        return () => clearTimeout(timer);
    }, []);

    const [mapTransform, setMapTransform] = useState({
        x: 0,
        y: 0
    });

    return (
        <Stage ref={stageRef} width={window.innerWidth} height={window.innerHeight}>
            <Layer>
                <Group
                    // draggable
                    // onDragEnd={(e) => {
                    //     const pos = e.target.getPosition();
                    //     setMapTransform(pos);
                    // }}
                >
                    {/* <URLImage src={testMap} x={0} y={0} /> */}
                    <MapGrid gridConfig={{ width: 1925, height: 1400, columns: 22, rows: 16 }} />
                </Group>
            </Layer>
        </Stage>
    )
}

// MapGrid.tsx

import { Line } from "react-konva"

interface GridByCount {
    width: number,
    height: number,
    columns: number,
    rows: number
}

interface MapGridProps {
    gridConfig: GridByCount;
}

export default function MapGrid({ gridConfig }: MapGridProps) {
    const { width, height, columns, rows } = gridConfig;
    const cellWidth = width / columns;
    const cellHeight = height / rows;
    return (
        <>
            {/* Vertical */}
            {Array.from({ length: columns + 1 }, (_, i) => (
                <Line
                    key={`vline-${i}`}
                    points={[i * cellWidth, 0, i * cellWidth, height]}
                    stroke="rgba(0, 0, 0, 0.3)"
                    strokeWidth={1}
                />
            ))}
            {/* Horizontal */}
            {Array.from({ length: columns + 1 }, (_, i) => (
                <Line
                    key={`hline-${i}`}
                    points={[0, i * cellHeight, width, i * cellHeight]}
                    stroke="rgba(0, 0, 0, 0.3)"
                    strokeWidth={1}
                />
            ))}
        </>
    )
}

I'm assuming it's some sort of Firefox optimization that's causing it?

[lavrton]

Can you make a very minimal codesandox demo to reproduce it?

[dominik1106]

https://codesandbox.io/p/github/dominik1106/konva-test/main
This is just the default vite, react, ts+swc template with App.tsx being replaced with the react-konva basic example.
When loading (or maybe reloading once) the circle/square only show up after dragging them once.

[lavrton]

Opened the demo on Firefox on Mac. I don't see any issues. Everything is visible on any load.