Do browsers make noticeable rounding errors when constructing css grid?

I made a 100 by 100 grid in css but for some viewport sizes there seems to be a rounding error since there are a few pixels on the right and bottom that are not covered by the grid. I suspect this is a rounding error that occurs when computing track sizes but it would be a rather weird error to occur only at some widths.

<body>
    <div class="initial grid-container">
        <div class="patch header bw">
            HEADER
        </div>
        <div class="patch1 c">
        </div>
        <div class="patch2 c">
        </div>
        <div class="patch3 c">
        </div>
        <div class="patch4 c">
        </div>
    </div>
</body>

* {
    padding: 0;
    margin: 0;
}

body {
    font-size: 25px;
    background-color: #00ffff;
}

.header {
    text-align: center;
    grid-column: 1/-1;
    grid-row: 1/41;
}

.c {
    background-color: #000000;
    color: #ffffff;
}

.grid-container {
    display: grid;
    grid-template-rows: repeat(100, 1vw);
    grid-template-columns: repeat(100, 1fr);
}

.patch1 {
    grid-column: 1 / 41;
    grid-row: 36/56;
}

.patch2 {
    grid-column: 11 / 21;
    grid-row: 71 / 81;
}

.patch3 {
    grid-column: 61 / 86;
    grid-row: 36 / 71;
}

.patch4 {
    grid-column: 91 / 101;
    grid-row: 91 / 101;
}

In both safari and chrome some viewport widths produce a tiny margin it seems on the right and bottom. It is almost as if the grid tracks are only re-calculated after the viewport width has changed more than, say 1 mm.

The reason I noticed this is because of the strong contrasts. Is this something I have to live with or am I doing something wrong?