Streaming live at 10am (PST)

Safari causing "flickering" with scroll animation [SOLVED]


#1

I need some help webflow family.

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?

Thank you.

-Mark


Here is my public share link: https://preview.webflow.com/preview/volleyballusa?preview=d20b35a1c543378f5e0b39f101542277
(how to access public share link)


#2

How did you solve it?I've spent a good amount of time on it without even being sure of what the flick was.


#3

Hey vincent,

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:

http://volleyballusa.webflow.io/

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.

https://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.