html,
body {
    overflow-x: hidden;
}

/* cinturón y tirantes */

.site-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    /* o el que uses */
    max-width: 100vw;
    transform: translateX(100%);
    /* completamente fuera de viewport */
    transition: transform .3s ease;
    will-change: transform;
    contain: paint;
    /* evita que “pinte” fuera */
}

.offcanvas-menu .site-mobile-menu {
    transform: translateX(0);
    /* abierto */
}