Flicker in Scroll Event (only in Safari)

Hi,

I am trying to show my “back-to-top” button only if the user has scrolled the page about half the height of his screen.


		$(window).scroll(function() {
			if ($(this).scrollTop() > $(document).width()/2)
			{
				$('.go-to-top').show();
			}
			else
			{
				$('.go-to-top').hide();
			}
		});

If I very slowly scroll with the mouse wheel, it works. If I do it faster, the page flickers. It also flickers every time I use the scrollbar, no matter how slow I scroll. However, this only happens in Safari and not in Firefox.

How can I fix this problem in Safari?

I think I might have found a solution.

I added the following rule:

h1 {
       -webkit-backface-visibility: hidden;
}

The funny thing is that I can to add this rule to any arbitrary element and it still fixed the problem, i.e. I don’t have to add it to a particular element.

I don’t know how that “mystery fix” works, but it sounds like the scroll event is firing too often causing frequent page redraws.

Maybe adding a short setTimeout would help?