Scrolling bug when focusing element inside position sticky container

I've created sticky scroll-spy navigation for the page, but there's weird behavior when user focus link or checkbox. This bug only occurs when container has position sticky, on position fixed this won't happen. I tried to remove all scripts, remove navigation on the left side problem persists, and changing class names. Checked this issue on Chrome, Edge, Opera & Firefox. My only idea to fix this is some javascript that will imitate position sticky behavior, but maybe there's some simpler solution.

<div id="secondary-nav" class="single-product-tabs white-shadow">
    <nav class="tabs-links js-scrollspy-tabs scrollspy-tabs tabs-dark container-fluid">
        <div class="effect" style="transform: translateX(500px)">
            <div class="bg"></div>
            <div class="shadow"></div>
        </div>
        <ul class="tabs-list">
            <li><a href="#dane-podstawowe">Dane podstawowe</a></li>
            <li><a href="#dane-techniczne">Dane techniczne</a></li>
            <li><a href="#opis">Opis</a></li>
            <li><a href="#zalaczniki">Załączniki</a></li>
        </ul>
    </nav>
    <div class="single-product-settings">
        <div class="dropdown dark-dropdown">
            <span>Waluta:</span><button type="button">PLN</button>
            <ul>
                <li><button>PLN</button></li>
                <li><button>USD</button></li>
                <li><button>€</button></li>
            </ul>
        </div>
        <label class="switch-wrapper">
            <span>Ceny brutto:</span>
            <div class="switch">
                <input type="checkbox" id="show-gross-prices">
                <span class="wajcha round"></span>
            </div>
        </label>
    </div>
</div>

.single-product-tabs {
    background: var(--gray5);
    padding: 32px 32px 0 0;
    position: sticky;
    // position: fixed;
    inset: 56px 0 auto 0;
    z-index: 50;
    display: flex;
}

Movie: https://youtu.be/9GRIWGO0g_g