Chrome's "Threaded scrolling" feature interrupts my animation

I am struggling to make one animation. I have a button that should appear to the left of the container at the moment when another button is hiding under the left border of the container while scrolling.

here is my example dom:

<div class="container">
    <div class="button" id="leftButton">button</div>
    <div class="scroll-container" id="scrollContainer">
        <div class="scroll-element">
            <div class="button" id="scrollButton">button</div>
        </div>
    </div>
</div>

here is my example script:

const scrollContainer = document.getElementById('scrollContainer');
scrollContainer.addEventListener('scroll', () => {
    const leftButton = document.getElementById('leftButton');
    const translate = Math.max(scrollContainer.offsetLeft - scrollContainer.scrollLeft, 0);
    leftButton.style.transform = `translateX(${translate}px)`;
});

This animation works perfect in safari and firefox, but flickers in Chrome. I was confused, i did not understand what i did wrong and finally found the issue - Threaded scrolling:

This option makes browser to perform scroll in another thread and therefore my code, which runs in main thread, can't synchronize properly with chrome's scroll.

Here is an example in Chrome:

Here is an example in Safari:

Please, help me to figure out, how to disable this feature programmatically, or how to force my code to run in scroll's thread.