Safari css rotate issue with bxslider

Question

I have made bxSlider with css rotation of 360 degrees. This is working fine in all browsers except in Safari.

Can anyone help me with this? Please find link here. Code below:

    $('#TestimonialUL').bxSlider({
    pager: false,
    mode: 'fade',
    onSliderLoad: function () {
        $('#TestimonialUL > li').eq(0).addClass('active-slide');
    },
    onSlideNext: function (){
        $('#TestimonialUL').css({
            'transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s',
            '-o-transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s',
            '-moz-transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s',
            '-webkit-transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s', 
            '-moz-backface-visibility': 'hidden',
            '-webkit-backface-visibility': 'hidden',
            'backface-visibility': 'hidden',
            '-o-transform': 'rotateY(-360deg)',
            '-moz-transform': 'rotateY(-360deg)',
            '-webkit-transform': 'rotateY(-360deg)',
            'transform': 'rotateY(-360deg)'
        }); 

        $('.client-innerBG .bx-viewport').css({
            '-o-perspective': '800px',
            '-moz-perspective': '800px',
            '-webkit-perspective': '800px',
            'perspective': '800px',
            '-webkit-transform-origin': 'top left',
            'transform-origin': 'top left',
            '-webkit-transform-style': 'preserve-3D',
            'transform-style': 'preserve-3D'
        });     

    },  
    onSlidePrev: function (){
        $('#TestimonialUL').css({
            '-o-transition':'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s',
            '-moz-transition':'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s',
            '-webkit-transition':'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s',
            'transition':'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s', 
            '-webkit-backface-visibility':'hidden',
            'backface-visibility':'hidden',
            '-o-transform': 'rotateY(360deg)',
            '-moz-transform': 'rotateY(360deg)',
            '-webkit-transform': 'rotateY(360deg)',
            'transform': 'rotateY(360deg)'
        }); 
        $('.client-innerBG .bx-viewport').css({
            '-o-perspective': '800px',
            '-moz-perspective': '800px',
            '-webkit-perspective': '800px',
            'perspective': '800px',
            '-webkit-transform-origin': 'top left',
            'transform-origin': 'top left',
            '-webkit-transform-style': 'preserve-3D',
            'transform-style': 'preserve-3D'
        }); 

    },
    onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
        //console.log(currentSlideHtmlObject);
        $('.active-slide').removeClass('active-slide');
        $('#TestimonialUL > li').eq(currentSlideHtmlObject).addClass('active-slide');

        $('#TestimonialUL').css({
            'transition':'0',
            '-o-transition':'0',
            '-moz-transition':'0',
            '-webkit-transition':'0', 
            '-moz-backface-visibility': 'hidden',
            '-webkit-backface-visibility': 'hidden',
            'backface-visibility': 'hidden',
            '-o-transform': 'rotateY(0deg)',
            '-moz-transform': 'rotateY(0deg)',
            '-webkit-transform': 'rotateY(0deg)',
            'transform': 'rotateY(0deg)'
        });
        $('.client-innerBG .bx-viewport').attr('style','');

    }

});

Answer 1

When you use the CSS rule -webkit-transition you need to reference the transform rule. In the case of webkit you need to reference the -webkit-transform rule rather than the transform rule.

So '-webkit-transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s' will need to be '-webkit-transition': '-webkit-transform 0.8s cubic-bezier(1, 0, 0, 1) 0s'.

Take care, you may also need to do the same with the -moz prefixed rule to target older versions of firefox better.