This issue only happens in Safari, that I know of. What sucks is that I don’t have a mac to keep testing on. Does anyone have any suggestions on site/apps that can emulate the latest Safari?
This issue is for the home page only. I have split navigation in two div elements. The top one above the video and the bottom one below the video.
As you scroll past the video and bottom navigation, I have more nav links appear (i have them green) in the top nav. As you scroll back up, the extra nav links disappear and the bottom navigation div reappears.
In Safari the links appearing in the top nav bar keep flickering like crazy. Anyone have any suggestions or advice on how to fix this in Safari?
I think initially for me, the problem was how I was “hiding/showing” the elements. I had the bottom navigation bar set to go 0% opacity after it scrolled past a certain point, and then I would have extra navigation links appear on the top navigation menu.
The “flickering” would just keep bugging out after i past the video and on every scroll thereafter.
You can check it out here, it’s on the homepage as you scroll past the video:
I then changed it to display: none on the scroll animation instead, because I think when the top navigation bar went over the second one, it was somehow causing the “flicker” because the block was still there affecting the Top Nav bar when the extra links would appear.
I also found a few other tips while trying to solve the “flickering” in Safari. I didn’t try them because the changes I made fixed the issue, but I think some people have found some luck with the options below.