Fullpage.js: Safari flicker on scrolling

[etaheri]

On both the jquery and javascript versions, a flicker of the next slide sometimes appears when scrolling. I have tried multiple things like -webkit-backface-visibility:hidden, z-index, and transforms in an attempt to fix the flicker.

This bug is reproducible on the javascript demo in safari. Usually reproduced by scrolling to the next slide and scrolling again before the animation is complete.

I know that it is most likely a browser engine issue, but is there a solution or quick fix that has been found?

[etaheri]

Here is a recording of the bug:
https://www.dropbox.com/s/iz0bvo6b98k60d9/scrollbug.mov?dl=0

[alvarotrigo]

I'll check it from my Mac whenever I can.

[alvarotrigo]

I was not able to reproduce it in my MacBook Pro mid 2010. Neither in browserstack.com

It might be a hardware acceleration related problem with your GPU. I guess you don't get it when using css3:false, do you?

[alvarotrigo]

I'll close the issue until provided more details or a reproduction.

[daltonpereira]

@alvarotrigo i recently experienced the same issue on a recent project, but found a solution on stack overflow

Issue: Upon scrolling vertically and horizontally on safari iOS, the content would appear only after 1 - 1.5 seconds.

Solution: added -webkit-transform: translate3d(0,0,0) to each fullpage section

Solution Reference: http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-delay

Hope this helps someone :)

also @alvarotrigo is it possible for you to update the section class with fix?

[alvarotrigo]

@daltonpereira I would need a reproduction so I can see the problem by myself .