Jump to content

Website Glitch/Stutter when loading page + Scrolling Issue

Recommended Posts

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>

 

 

Edited by chillwave
Link to comment
  • 11 months later...
  • Replies 1
  • Views 742
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.