Using CSS transforms on bxSlider items break animation in Safari

Question

I came across this issue when upgrading to the latest version of bxSlider (v4.1). The new version is responsive and therefore uses transform to go between slides, rather than the old way of using the left property (used in v3.x).

I have created a demo here: http://jsfiddle.net/SXZjV/

When viewed in Safari 5, the hover on the blocks don't do anything. However, when disabling -webkit-transform: translate3d(0px, 0px, 0px); via the inspector, the animations work fine.

Is there a way to get the two transforms to work in harmony?

Many thanks.

P.s. I am yet to test this behaviour in Safari 6 as I am currently running Snow Leopard.

score 2 · Answer 1 · answered Jun 06 '13 at 08:52

The same to me in Safari 5.1.9. Only way I managed CSS animations to work is using included "jQuery easing":

 $('#bxslider').bxSlider({
      useCSS: false,
      easing: 'easeInBack' //Or other animation http://gsgd.co.uk/sandbox/jquery/easing/ 
  });

P.S. By the way it works on Safari 6 (Mountain Lion)

Using CSS transforms on bxSlider items break animation in Safari

1 Answers1