Hi guys, I really hope you can help me solve this! Once my homepage is loaded, and after you scroll down tiny bit, there is a glitchy effect when opening the nav menu. You can see it in this short screen recording I made (after the first click):
It’s as though the body content is displaying through the menu for a millisecond. It doesn’t happen on every click, and is kind of unpredictable. Can anyone out there help a struggling girl? Lol. I appreciate any tips!
I’m using Safari on my MacBook Pro (Big Sur). Good to know it’s not happening on all browsers. Can it be fixed on Safari, possibly with custom code, or changing the visibility of the body within the interaction that occurs when the nav menu is opened?
@raquelpea - There is really no way for me to test since I can’t publish and view. To me it looks like Safari is having an issue with the easing open. You can try changing that in your menu open and see if you get different results.
I played with the easing and duration settings in the menu options, which didn’t fix the issue.
The only thing that stopped the glitches was making the menu open from top down, instead of opening from either side. This isn’t how I wanted the menu to open, but I’m going to leave it alone for now. I have a feeling my the custom menu animation that I created, which happens after the menu opens, is interfering with the pre-built animations that come with the nave menu element. At some point I’ll probably rebuild a custom menu to see if it solves the glitch.
Sounds like a good plan. Animations don’t always work in every browser so testing is always necessary. I personally stay light on animations as I want speed and performance first, generally. Sorry I could not have been more helpful. Have a great day.
