Scroll down element interaction in different location on different web browsers

[Kell]

I added an element right below the hero section to indicate that there’s more content if the user scrolls down. When testing in different browsers, it seems like it works well on Chrome and Firefox, but when using Safari, for some reason, the centered arrow looks slightly lower than centered. (Images below)

View when using Safari

View when using Chrome

Has anyone else seen something similar? I was wondering what would be the best way to address this?

Thanks!

---

Here is my public share link: [LINK][1]
([how to access public share link][2])

[j0vil (Jovil Hiew)]

set top and left value to 50% and reset bottom and right value. Then add transform translate(-50%, -50%)

[Kell]

@j0vil Thanks for your response. It did fix my issue!