Suwak w postaci taśmy. Błędy w Safari

Question

Zrobiłem suwak w formie taśmy. W Chrome i Mozilli wszystko wygląda dobrze, ale w Safari wygląda okropnie. Może ktoś może pomóc w rozwiązaniu problemu?!? Z góry dziękuję!

jsfiddle.net/mcbgv/7/

css:

#wrapper1 #my_scroll {z-index:5; height:480px; width:640px; position:absolute; top:-10px; left:12px;} 
#wrapper1 #bloc_wrap {height:480px; width:640px; z-index:7; overflow:hidden;} 
#wrapper1 #wrapper_sl {height:480px;} 
#wrapper1 #wrapper_sl .block {width:150px; background:blue; border:2px solid #fff; position:absolute; margin:-40px 0 0 0; z-index:1; height:108px; overflow:hidden; transition: all 1.2s linear ; -webkit-transition: all 1.2s linear ; -moz-transition: all 1.2s linear ; -webkit-border-radius: 15px; -moz-border-radius: 15px; zoom: 1; border-radius: 15px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;} 
#wrapper1 #wrapper_sl .block img {border:0px solid #FFF; height:108px; cursor:pointer; margin:0 0 0 -16px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;} 
#wrapper1 #my_scroll .main {position:relative;} 
#wrapper1 #my_scroll .main div {display:none; background:green; position:absolute; z-index:5; top:74px; left:78px;} 
#wrapper1 #my_scroll .main div a {display:block; position:relative; width:560px; height:350px; border:solid 1px #000000; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; overflow:hidden; color:#ffffff; text-decoration:none;} 

jQuery:

var docheight = $("#my_scroll").outerHeight(); 
var docwidth = $(window).width(); 
// Slider "circular motion" Drew - magart.com.ua START 
var myDiv = document.getElementById("bloc_wrap"); 
var ImgDiv = $("#wrapper_sl").find(".block"); 
var ImgLink = $("#wrapper_sl").find(".block a"); 
var $size_dug = 230; //radius 
var $smes_x = 230; 
var $smes_y = docheight - $size_dug - 17; 
var $kolvo = 14; //kolichestvo blokov 
var $skorost = 200; //cem bolshe tem medlennei (dilitel skorosti) 
var $ugol = (2 * Math.PI/$kolvo); 
var $start_pr = 0; 
var $global_v = 0; 

var main = $('#my_scroll').find('.main'); 

$(ImgLink).click(function() { 
    var ImgRel = $(this).attr('rel'); 
    main.find('div').fadeOut(100); 
    $('#my_scroll .main ' + ImgRel).fadeIn(250); 
}); 

function sec1() { 
    $global_v = $global_v + 10; 
    $nowz = (($global_v + $start_pr)/$skorost) + $ugol * 2; 
    for (var ink = 0, len = $kolvo; ink < len; ink++) { 
     uno1 = $(ImgDiv[ink]); 
     $rad1 = ((ink + 1) * $ugol + $nowz); 
     $deg1 = $rad1 * 360/(2 * Math.PI) + 270; 
     trata = Math.sin(-($rad1)) * $size_dug + $smes_x; 
     if (trata > 260) { 
      zind = 1; 
     } else { 
      zind = 10; 
     } 
     uno1.css({ 
      top: Math.cos($rad1) * $size_dug + $smes_y, 
      left: trata, 
      zIndex: zind, 
      transform: 'skewX(-' + $deg1 + 'deg) rotateX(' + $deg1 + 'deg)', 
      '-moz-transform': 'skewX(-' + $deg1 + 'deg) rotateX(' + $deg1 + 'deg)', 
      '-webkit-transform': 'skewX(-' + $deg1 + 'deg) rotateX(' + $deg1 + 'deg)' 
     }); 
    }; 

} 

// Slider "circular motion" Drew - magart.com.ua END  

sec1(); 

Answer 1

-webkit transformaty powinien współpracuje z Chrome i Safari.

Z której wersji Safari korzystasz?

P.S .: aby to działa w operze trzeba użyć -o-transform