Search code examples
htmlcssparallaxflickersquarespace

Parallax Jitter on Squarespace Site

I know this isn't a typical StackOverflow coding problem, but I wanted to get some insight on how to fix the jitter, whitespaces above and below my image, and flickering in my parallax sections while scrolling on a Squarespace site I'm creating for a client. I have my parallax (index page) sections at 100vh and all of my images and sections full width using flexbox.

I'm using the Moshka (Brine) template currently and I've read a little bit that this particular family of templates has problems with parallax, but I'm hoping that maybe someone has an idea I can try to fix these problems using custom code injections.

I'm able to use basic CSS and HTML to make something look the way I want, but I'm fairly inexperienced and don't know where to begin with something like fixing the parallax of a Squarespace site and hope someone can point me in the right direction (or tell me that it's hopeless, which is fine too).

I've tried removing my custom code, changing the height of the parallax sections, and changing the width of my browser to fix it, but nothing seems to work to stop the jitter and flickering. If I remove the flexbox part of my code, the white spaces above and below the parallax image is a little bit better, but the problems still persist.

Thanks in advance for any help! And sorry if this isn't really the right place to ask.

I don't know if it's necessary to supply my custom code or not, but I can revise this post to include some if people think it's necessary. I've included an example of the flickering I'm getting on the parallax sections of my site (the 1px black line through the image) below. I can't really capture the white spaces I'm getting since they appear while scrolling and go away when I stop.

A screenshot of parallax flickering

Thanks again!

Solution

  • The work-around for this white space gap "tearing" between Squarespace parallax index page sections is to create an element "behind" the image in each section, then fill that element with a color (or gradient) that is similar to that which is seen in the transition area between the two sections.

    This works better in situations where each section with a background image alternates with a section with flat background color.

    However, it can still work adequately in your situation, where images are butted-up against one-another (and where the color across the top/bottom of an image is relatively consistent across the width of the image).

    The following CSS, inserted via the Squarespace CSS Editor will make the "tearing" nearly imperceptible between sections on the example site you provided.

    .Index-page--has-image:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
}
#welcome:before {
    background-color: #232125;
}
#last:before {
    background-color: #CAB8B1;
}

    Of course, the "tearing" is still occurring, but we're filling what was a white gap (very perceptible) with a color that approximates the colors of the image (so that it is less easily perceived).

    Note that the colors (232125, CAB8B1) and the IDs (welcome, last) are specific to the example site you provided. They would need to be changed on a per-site basis. The colors were selected by sampling a color from the applicable portion of each image and the index-page section IDs are assigned by Squarespace based on the "URL slug" within the page settings for each page.

    Now, let's look a little more closely, however.

    While the above CSS makes the tearing between sections imperceptible, there is still tearing between the first section and the navigation bar (white), and between the last section and the footer (navy blue).

    So, we must get a bit more complex, adding a background-gradient to the pseudo-element. To do that, you'd use something like this instead of the above CSS:

    .Index-page--has-image:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
}
#welcome:before {
    background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 50%,#232125 50%,#232125 100%);
}
#last:before {
    background: linear-gradient(to bottom,  #CAB8B1 0%,#CAB8B1 50%,#081359 50%,#081359 100%);
}

    It's worth mentioning that this isn't so much an issue with Squarespace, but the nature of Javascript scroll events and page rendering. The offset amount is based on how much the page has scrolled (past tense), so of course that amount can't be calculated (and then acted-upon) until after the scroll happens. So inherently the offset is always "catching up". The idea behind Squarespace's implementation is that the user will be on a device and browser that is running well enough that the delay is not perceived. Obviously, that's not always the case though!