Shaky Browser Window on Scroll

I’ve never seen this happen before on a Webflow-built site, but when you scroll up on the live site (http://bokonlinebankingv2.webflow.io/), elements, mainly the nav bar begin shaking and glitching. I’ve tried the site on different browsers and received the same type of results.

https://preview.webflow.com/preview/bokonlinebankingv2?preview=3e438426de158edcf924dcb760603024

Since it’s not a static issue, I can’t share a screen capture. But if you scroll through the live site you’ll see what I’m talking about.

Any help would be greatly appreciated.

everything looks smooth on my end. I’ve tried it on my MacBook Pro Safari, Chrome and Firefox. =\

Weird. But thanks for checking it out.

Today I don’t see it but yesterdays on a different computer I was.

I have the same issue on several sites. I’ve passed some time to try to fix it, I have to find how but I still haven’t.

Often it happens only on the published version.

So I see it on your published site.

https://v.usetapes.com/2vjZpNbMpK

It’s hard to fight against, because anytime I inspect the page or change anything in the inspector, the bug stops. Anytime the browser is resized, the bug stops.

A beer for the fix! (a large and good one!)

Hi @chrisgreer33, could you try this, first duplicate the site so you have a copy to play with, and then create a new section under the body, and give it a class of nav. Then set it’s styles as:

Also add box shadow to the Nav section:

And set the type on the Nav section to Nav:

Next remove the styles except for the padding that were on the navigation class and set the height to 100%:

Finally, move the navigation bar into the Nav section:

One note, you currently have navlink class setup with 15px left and right padding, with the parent container floated right and the navlinks setup with auto width, so each time the browser resizes, the menu-ham div starts at 6x30px width floated to the right with each link having zero width but 15px padding, as the page loads, the text expands automatically to it’s width based on the content in the navlink. It might be worth adding fixed width to your navlinks as well…

Try this, maybe with a duplicate copy of the site, and see if you can reproduce the error, can you please let me know, and I will check the duplicated site :smile:

Cheers, Dave

Dave:
I built out a duplicate of the site and made the changes you recommended including adding the following in the custom code:

body { -webkit-font-smoothing: antialiased; }

But I’m still getting the shaky effect. Any other ideas?

https://preview.webflow.com/preview/bokonlinebankingv3?preview=07aa63151e286e67e3fc6db196ca788b

Hey @chrisgreer33

Your current read only link shows a section with the class nav. However you haven’t change the section from a div to a nav element like @cyberdave showed in his explanation. Try fixing that and let us know what happens.

http://forum.webflow.com/uploads/webflow1/original/2X/5/57d79fa11260211f50f0455bc4a90e409bbdf52d.png

Great catch Davidn … missed that step. Seems to have cleared things up.

Thanks to everyone who helped me out with big love to cyberdave.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.