Slider in the form of tape. Bugs in Safari

问题:

I have made the slider in the form of tape. In Chrome and Mozilla it looks good enough, but in Safari it looks terrible. Maybe someone can help to solve the problem?!? Thanks in advance!

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();

回答1:

-webkit-transform should works with Chrome and Safari.

Which version of Safari are you using?

P.S.: to make it works in Opera you need to use -o-transform