Hey guys,
I have seen some others struggling with this, however none of the solutions I found did the trick for me. Basically, this is a hover animation that triggers a dropdown menu of a navbar link.
On Safari it works great but on Chrome its terribly choppy and laggy. Any Ideas?
THANKS IN ADVANCE
Hi @Douglas_Fullerton, thanks for the post 
I might suggest to change the easing on the navbar-chevron rotation in the interaction from “Out-Expo” to “Linear”:
Both the dropdown and the chevron have the same easing and that might be causing the interactions to step on each other as they are set to run at the same time.
I would change the easing for the navbar-chevron for both hover in and hover out interaction actions.
After making change, republish site and see if that helps.
.cd
Hi Dave,
nice idea but unfortunately didn’t solve the issue. I have built something similar in the past for a client and had no problem with it:
Can’t seem to see what is causing this new website to give me issues 
Was it also choppy for you on Chrome, yet smooth on safari?
THANKS
Hi @Douglas_Fullerton, I am not seeing any choppy behavior in Chrome, is it possible for you to take a video of how it looks?
Thanks Dave:
First is Chrome, then second is safari. Driving me crazzzy
Hi @Douglas_Fullerton, thanks for your reply.
One thing to check is the duration of the dropdown opacity change, in the site example you gave, the duration of the transition is set to .3 seconds, while on the site that you were having trouble with, it seems that is set to .5 seconds.
Site where working:
Site at meph.webflow.io where not working:
I would also change the transition time for the navlinks, right now it is set to have a 500ms transition on all css property changes including hover effects:
In the site that works, the dropdown link is styled for a background color transition only and only for 150ms:
I hope this helps to narrow it down, it looks like some style differences and interaction differences between the two projects.
Thanks for the help I will look into these and see if I can get closer to a solution. Again, I’m just surprised that it works flawlessly on Safari and terribly on Chrome 
Hi @Douglas_Fullerton, well the two browsers are not equal they each have their own rendering engine and different browsers can have different results even if the html code that is published is the same.
In those cases, it is good to make the styles consistent and I would check the timing on the transitions and change those for the dropdown links to be consistent, right now it takes half a second for each nav link to change background color on the site page where it is choppy due to the transition.
Chrome is probably handling the transition changes differently than Safari in this case, normally if you have a transition that does not run fully before a new hover event is triggered, that can cause the stuttery, choppy look on chrome.
So after having nightmares about it yesterday, I think I just figured out what the problem ist:
I rebuilt the entire thing and it was working fine, until I changed the positioning of the navbar to be sticky (and/or fixed). Chrome does not like that
Not sure if there really is a solution to this? Custom code? The client needs the navigation to be stuck to the page at all times.
Have you heard of this issue before?
Thanks again!
Hi @Douglas_Fullerton, thanks for your reply and additional info. Having the nav fixed in of itself I think should not be a problem, I can help to take a look.
I checked the playground page, but it seems to be blank now with elements removed, could you let me know the name of another page where I can observe the issue? I assume the home page?