Mobile browsers do strange and hard things to the DOM, I can’t find exactly what is happening here, but the IX clearly doesn’t fire up under certain conditions.
There is another issue with your IX that you haven’t found yet because you have no link to another page or site in your page. When you’re going to exit the page clicking on a link, if you use the browser back button — and users do that all the time — the page is going to reload at the place they left it and your IX isn’t going to be triggered, so most of the time, clicking back button to go back on any of your pages will end up with a transparent Navbar.
To fix both issues, try to place a While scrolling into view triggered IX on the hero. Then carefully set these options:
Now use the first keyframes at the top to make your Navbar bg fade.
I’m not saying it’s going to fix both issues for sure. I think it’s fixing the one I’m raising because while scrolling in view apparently is replayed when the page loads, wherever it loads. To test it, edit one of the links in your footer, follow it, and go back with the browser button.
And as it’s a different way to approach the IX, maybe it won’t bug on mobile.
Morphing navbars on scroll is an uncertain sport, always
Edit you can also try to have the new trigger on the element you’re using as a trigger already, but Hero should work fine too.
Edit 2 don’t overlook that if you’re making a symbol out of the navbar to reuse it on other pages, you’ll have to manually redo the IX on every page, because the IX trigger isn’t on the symbol… There are ways to have the trigger inside of the symbol but more problems then emerge.