Website Glitch/Stutter when loading page + Scrolling Issue

Site URL: https://www.iamcatterina.com

Hi All,

WEBSITE: iamcatterina.com

PASSWORD: catterina

I'm building my client's website and have had a couple troubleshooting issues:

• When loading the page, there's a "jump" glitch. Where the website loads small and jumps to the actual website size. It only occurs when first loading the page. Or clicking the navigation logo. Here's a screen recording to show the issue.
• Another issue is the scrolling feature. I've added anchor jump points to the navigation. However, I noticed that it's not working on Safari/mobile. My client really wants this feature to be streamlined on all platforms, so please let me know if there's a work around this. 

I've tried solving the issue by checking the coding I've added. But I noticed that even when I remove all of the coding, the loading glitch still occurs. Any help would be WONDERFUL! I've attached the coding additions as well if that helps at all:

Quote

 

CUSTOM CSS:

// Shrinking Logo On Scroll - 7.1 //
.header.shrink img {
    max-width: 300px;
    transition: all 0.2s ease-in-out
}

.header img {
    transition: all 0.2s ease-in-out
}

/*different mobile background*/
@media only screen and (max-width: 640px){
#page .page-section:nth-child(1) .section-background img {opacity:0 }
#page .page-section:nth-child(1)  .section-background {
background-image: url(https://static1.squarespace.com/static/61a3cef71fd4bc35a5312e4f/t/61d9f0cb0c377c7dc3e66a92/1641672911220/Dec+30+-+mobile.png);
background-size: cover;
background-position: CENTER;
background-repeat: no-repeat;
}
}
/*Make split navigation*/
.header-nav {
    position: absolute;
    top: -10px;
    bottom: 0;
    margin-top: .5!important;
    margin-left: 18px!important;
}

.header-nav-item:nth-of-type(2) {
    margin-right: 600px!important;
}

.header-title-logo a {
    z-index: 1000;
    position: relative;
}

/*smooth scroll*/
:target:before {
content:"";
display:block;
height:125px; /* fixed header height*/
margin:-120px 0 0; /* negative fixed header height */
}

html {
scroll-behavior: smooth;
}

CODING INJECTION:

HEADER

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
var a=['\x68\x65\x61\x64\x65\x72\x23\x68\x65\x61','\x73\x63\x72\x6f\x6c\x6c','\x64\x65\x72','\x72\x65\x6d\x6f\x76\x65\x43\x6c\x61\x73','\x70\x61\x67\x65\x59\x4f\x66\x66\x73\x65','\x74\x75\x61\x6e','\x64\x6f\x63\x75\x6d\x65\x6e\x74\x45\x6c'];(function(b,e){var f=function(g){while(--g){b['push'](b['shift']());}};f(++e);}(a,0x150));var b=function(c,d){c=c-0x0;var e=a[c];return e;};$(function(){var c=0xa;$(window)[b('\x30\x78\x31')](function(){var e=d();if(e>=c){$(b('\x30\x78\x30')+b('\x30\x78\x32'))['\x61\x64\x64\x43\x6c\x61\x73\x73']('\x74\x75\x61\x6e');}else{$(b('\x30\x78\x30')+b('\x30\x78\x32'))[b('\x30\x78\x33')+'\x73'](b('\x30\x78\x35'));}});function d(){return window[b('\x30\x78\x34')+'\x74']||document[b('\x30\x78\x36')+'\x65\x6d\x65\x6e\x74']['\x73\x63\x72\x6f\x6c\x6c\x54\x6f\x70'];}});
</script>
<style>
.tuan {
    position: fixed;
    background: white !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999 !important;
}
</style>

 

I'm having the same issue, only on mobile, where "parallax" background images (7.1 fluid) are used. It works find on desktop, but the mobile is awful glitchy, especially in Firefox browser. 

https://labtheater.org

Any updates/ideas?