Shaking navbar and laggy drop shadows when using smooth scroll with js

Hi! First off, I would like to thank you for your awesome library!

Issue description:

I tried to condense my issues in the code below. I am really sorry, I think we can condense it more but I didn't manage because I don't really get it.

The first issue is when you use the navbar links to scroll down and up. You can observe that the navbar shakes, shifts up and down, and even blinks.

The second issue is when you are in the section4 and then click to section1, you can observe a lag when we reach the section1. (the bug appears when you scroll to section1 using the navbar, no matter if you start from the section3 or another one)

I don't know if it can help but here are what I observed:

These bugs only work on Safari (I use the version 13.1)
If I remove transform: translate(-50%, -50%) in the CSS the navbar doesn't shake anymore, font-family can also have the same behavior sometimes.
If I remove Jarallax everything works of course
When I remove the drop shadows there is no lag anymore
Removing bootstrap or JqueryUi doesn't change the behavior
Don't forget to put a background

Thank you for your help

Version used:

I use the lastest version of Jarallax v1.12.1

Code to reproduce the issue (HTML blocks + JavaScript initialization)

Here is my markup

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <link rel="stylesheet" href="style.css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        </head>
    <body>
        <div id="background" class="jarallax" data-jarallax data-speed="0.05">
        <img class="jarallax-img" src="bg.jpeg" alt="victoria falls background">
            <div class="wrapper">
                <nav>
            <ul>
                        <li><a href="#section1">section1</a></li>
            <li><a href="#section2">section2</a></li>
            <li><a href="#section3">section3</a></li>
            <li><a href="#section4">section4</a></li>
                    </ul>
                </nav>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="content__frame">
                                <div id="section1" class="content1"></div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="content__frame">
                                <div class="content2"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="section2"></div>
                <div id="section3"></div>
                <div id="section4"></div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.5.0.min.js"   integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="   crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"   integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="   crossorigin="anonymous"></script>
        <script src="https://unpkg.com/jarallax@1/dist/jarallax.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="main.js"></script>
    </body>
</html>

style.css

html, body {
    margin: 0;
    padding: 0;
}

.content1 {
    background-image: radial-gradient(circle at 101.4% 0px, rgba(0, 0, 0, 0) 0, rgb(222,184,135, 0) 105px, white 105px);
    height: 300px;
    margin: 1000px 0px;
}

.content2 {
    background-image: radial-gradient(circle at -1.4% 0px, rgba(0, 0, 0, 0) 0, rgb(222,184,135, 0) 105px, white 105px);
    height: 300px;
    margin: 1000px 0px;
}

.content__frame {
    filter: drop-shadow(10px 10px 10px rgb(0, 0, 0, 1));
}

nav {
    font-family: Arial, Helvetica, sans-serif;
    text-align: right;
    position: fixed;
    right: 1.5%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

#section2, #section3, #section4 {
    height: 300vh;
}

main.js

(function($) {

    // Smooth scroll to the anchor
    $("nav a").bind('click', function(event) {

            var $this = $(this),
        id = $this.attr("href"),
        $section = $(id);

            event.preventDefault();
        $("html, body").stop().animate({
            scrollTop: $section.offset().top
         }, 1500, 'easeInOutExpo');

        $("html, body").on("scroll wheel DOMMouseScroll mousewheel keyup touchmove", function(){
        $("html, body").stop()});
    });

})(jQuery);

nk-o / jarallax