The reason for this is style is to prevent this highlight from happening when a user using a mobile device tries to navigate to another page. On a desktop/laptop this would not happen since a user would be clicking and not tapping

The only mobile browser where this style is not compatible is firefox for android. I figured the amount of people who actually use this browser is quite minimal so it would not be risky to add (the only risk is that firefox for android users would briefly see the tap highlight color) and this style would fix the tap highlight color for every other mobile browser

Since we are setting the top: 0 value in nav.activeMobileNav class in D7781 to be right underneath the header we do need to set the top here to be top: -110vh so that we prevent this situation (this is when top: -100vh):

Probably should have wrote an inline comment initially to make that more clear

I did spend a lot of time searching and looking for alternate ways to achieve the same thing; however, I was still getting that highlight box shown in the video above. I know this is not the "ideal" solution since we are using browser-specific style, but I do think it is the lesser of two evils where having that highlight when a user taps on a tab is worse than having some browser-specific styles.

Again I just want to reiterate that the only risk to using this style is that this does not work for Firefox for android users (which I don't expect is a majority of people), and the benefits here is that every other mobile browser won't have this weird tap highlight color