Some CSS transitions running slowly

Design help Animations & Interactions
1

My website has several components that use basic CSS transitions. For some reason, the components in the Nav menu run really slowly, while the components in the main grid run much smoother.

Edit: it’s running smoothly without my custom CSS, but I wouldn’t think that CSS is particularly heavy. This seems to be causing the slowdown, but I have no idea why:

.navlink:hover .navlinkarrow {
    opacity: 1;
  	transform: translate(0px);
}
.navlink:hover .navlinknumber {
    opacity: 0;
	transform: translate(20px);
}

Edit 2: The slowdown seems to be affecting Safari on Mac, but not Chrome.

Here is my public share link: LINK
(how to access public share link)

2

It seems like it was the filter transitions on the main grid components that was causing the slowdown in Safari. Which is strange, because Safari could render those transitions without much of a problem. Not sure if this is a Safari problem or a Webflow problem, but if anyone knows why I’d still appreciate it.