Navbar pops in/glitches in Chrome?

Hi!

I’m having this issue where my navbar (which should be 100% hidden before scrolling) will pop in and then disappear upon loading the page in Chrome. (doesn’t happen in Safari)

The Navbar’s position is essentially set to Fixed, with a While Page is Scrolling animation bringing it from above the page, into view upon scrolling to a certain part of the page.

After the initial load, everything work fine. But the weird pop in is annoying. Does anyone have an idea what could cause this?

Things I’ve tried:

  • Tried placing it’s pos to +1 in Z space?

https://mluckhardt-com.webflow.io/


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey Michael — can you share your site’s read-only link so others can take a look at how you have your website set up?

Hi Matt,

Sure thing!
https://preview.webflow.com/preview/mluckhardt-com?utm_source=mluckhardt-com&preview=ea7c37a07f9948027f177b93aab67f91

A few caveats though:

  1. The pop-in won’t appear when previewing the webpage within webflow, only after publishing. So it’d be difficult to test/diagnose.
  2. The Navbar is actually nested inside of a div which is set to Fixed, which is whats animating. (There’s a reason for this, but I can explain later). I thought this was the reason for the glitch, but upon taking the Navbar out of the div, changing it to fixed, and animating it directly, it still happens.

Your navbarbasefixed should be at 0% with the desired move up shift. Like this:
48%20PM

Currently it starts being moved up at 6% and perhaps this is the culprit.

1 Like

Thank you for the suggestion Dram.

I’ve made that change, and republished. Unfortunately the pop in is still ongoing :(.

New share link:
https://preview.webflow.com/preview/mluckhardt-com?utm_source=mluckhardt-com&preview=ccd643f0419952438dcac398b729c35f

Ah, understood. Just set transform for your navbarbasefixed in the style panel to be the same as you have it in your ix (-89px)

2 Likes

No way! That worked!

I don’t understand why that would need to be applied though? Shouldn’t it’s base position adhere to what the 0 animation is set to?

Regardless it worked!!! Thank you!

interactions are applied in a process of page loading, meaning that original position of the element can be visible for a split second.

2 Likes

I had no idea. Thank you so much Dram.

If this is covered in one of the tutorial online vids, I’ll feel pretty silly. Sorry if I missed it.

I don’t think this is states explicitly anywhere. At least I do not remember - it’s been a while since I watched the tutorials!

1 Like