I’m using an iPhone 7 and an iPhone 10 to test my website for mobile.
However when scrolling down and up (very) fast, it seems the interaction “scroll into view” on the “scroll-nav” doesn’t seem to work. It sometimes skips the fade-out effect of the changing BG-color when scrolling to the top of the page.
It seems like it misses the percentage of the animation keyframes.
Does anyone know a solution for this?
Here is my public share link: LINK
Visit the website on mobile: LINK
Hi Elvira,
On mobile, the trigger element is smaller then the actual navbar, that might cause the problem.
Try to see if you change the trigger element to the hero section, if the problem consists.
Making the trigger element higher doesn’t seem to fix it… Already tried to do it, didn’t work. I also have published it now with a higher trigger element.
DId you try changing the trigger to a section?
Can you explain to me why to use a section instead of a div? A section still is a div with extra css settings, right?
If I put it on the hero section, the navbar will float above the white text, I want the navbar to be black when it almost hits the white text of the hero section, so the user will still be able to read the links of the navbar. 
I don’t have an explanation, only an idea for a possible solution
So you can use the ‘while scrolling’ instead of the ‘when scrolling in/out of view’
Not working correctly… accidently edited this reply…
Can you try moving the trigger element so it won’t be at the top of the screen? maybe 10% lower?
I tried to create a video of the behaviour it has now.
Yea, I am seeing the problem on my iPhone as well…
Seems like it happens when the address bar is changing size, right?
Yes and if you scroll very fast, like the double scrolling. I also think the very fast scrolling is a different kind of mobile event. It’s like it doesn’t track the scroll start/stop.
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.
