Issue with Header Text Jumping on Squarespace

Hello,

I’m encountering an issue with my Squarespace website. The header text in the first section of each page jumps down and then back up when the page loads. This happens consistently across different browsers and devices, and it only affects the first section of the page.

Details:

• Issue: On page load, the header text in the first section moves down briefly before settling back into place. It’s visually jarring and affects the user experience.
• What I've Tried:
  • Inspected the CSS and tried disabling various elements. I noticed the issue seems tied to grid-template-rows and grid-template-columns in my CSS.
  • Removed the first section using CSS and found that the issue disappears when Squarespace moves everything up.
  • Considering that the issue might be related to the dynamic padding/margin Squarespace applies to the first section, I attempted to override these with fixed values.
  • Tried preloading the background image to avoid layout shifts, but the problem persisted.

Despite all this, I haven’t been able to pinpoint the exact cause or find a lasting solution. It seems related to how Squarespace applies dynamic styles based on viewport size or content loading, particularly in the first section of each page.

Questions:

1. Has anyone else encountered a similar issue with the header text jumping on page load? If so, how did you resolve it?
2. Could this be related to how Squarespace calculates padding/margin or loads background images in the first section? Any advice on what to try next?

I would greatly appreciate any insights, suggestions, or solutions from the community!

Check this page where the issue happens: www.lindsaypark.com.au/tracks

Thank you in advance for your help!