1

I have a parallax website for which I move some elements using transform: translate() and transition properties for nice animations. The only problem seems to be with Safari on Mac where I'm facing some weird flickering effect.

I've noticed it's a known problem and I've tried most of the suggested fixes around with "-webkit-backface-visibility: hidden;", "translate3d()" and a few others but none seemed to work when the element has a background image. All I'm doing is animating the transform property like below:

el.style["transform"] = "translate3d(0px," + topDistance + "px,0px)";

Here's a demo of the problem:

http://jsfiddle.net/3yfspjLt/

It's animating the div with the bg-image on the scroll event.

Adrian Neatu
  • 1,989
  • 2
  • 19
  • 34
  • May be this could help: http://stackoverflow.com/questions/13952480/why-does-applying-webkit-backface-visibility-hidden-fix-issues-with-negativ – YuS Sep 17 '14 at 12:10
  • @Yuri thanks but it doesn't help, I'm using exactly what it's explained in the post. – Adrian Neatu Sep 17 '14 at 13:30

0 Answers0