Geek Answers Handbook

Safari css rotates issue with bxslider

I made bxSlider with 360 degree css rotation. This works fine in all browsers except Safari.

Can anyone help me with this? Please find the 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',''); } });
+5
source share
1 answer

When you use the CSS -webkit-transition rule, you need to reference the transform rule. In the case of webkit, you need to refer to the -webkit-transform rule, not the transform rule.

So, '-webkit-transition': 'transform 0.8s cubic-bezier(1, 0, 0, 1) 0s' should 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 prefixed -moz rule to better configure older versions of firefox.

+1
source

More articles:


All Articles