Problem rendering fullscreen/fixed canvas in iOS safari

I think I know what causes the issue here, when using position:fixed on iOS:

• iOS uses a separate compositing layer for fixed elements.

• During fast scrolls, iOS:

  • May defer updating fixed elements (to save GPU time).

  • May apply rubber-banding or dynamic address bar shifting.

• So getBoundingClientRect() for a fixed canvas does not update in sync with DOM elements that are actually moving with the scroll.

My suggestion is to replace position: fixed with absolute and add scroll tracking.

By removing position: fixed and syncing manually with scroll, you guarantee the canvas aligns with DOM layout, even in iOS Safari.

Also, Use visualViewport instead of relying only on innerHeight

The problem with innerHeight on iOS are:

• The value can change unpredictably when:

  • You scroll (the address bar collapses or expands)

  • The user zooms

• But you aren’t notified via resize events in many of these cases.

• So if you base canvas logic (like canvas.height, scissor regions, or layout alignment) on window.innerHeight, you get outdated or wrong dimensions.

#main-canvas {
    position: absolute; / Changed from fixed /
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

body {
    -webkit-overflow-scrolling: auto;
    overflow-scrolling: auto;
}
html, body {
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
}