Als Experiment habe ich einige Divs erstellt und sie mit CSS3 gedreht.

    .items { 
        position: absolute;
        cursor: pointer;
        background: #FFC400;
        -moz-box-shadow: 0px 0px 2px #E39900;
        -webkit-box-shadow: 1px 1px 2px #E39900; 
        box-shadow: 0px 0px 2px #E39900;
        -moz-border-radius: 2px; 
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }

Ich habe sie dann nach dem Zufallsprinzip gestylt und per jQuery verschiebbar gemacht.

    $('.items').each(function() {
        $(this).css({
            top: (80 * Math.random()) + '%',
            left: (80 * Math.random()) + '%',
            width: (100 + 200 * Math.random()) + 'px',
            height: (10 + 10 * Math.random()) + 'px',
            '-moz-transform': 'rotate(' + (180 * Math.random()) + 'deg)',
            '-o-transform': 'rotate(' + (180 * Math.random()) + 'deg)',
            '-webkit-transform': 'rotate(' + (180 * Math.random()) + 'deg)',
        });
    });

    $('.items').draggable();

Das Ziehen funktioniert, aber ich bemerke einen plötzlichen Sprung beim Ziehen der Divs nur in Webkit-Browsern, während in Firefox alles in Ordnung ist.

Wenn ich das @ entferposition: absolute style, das "Springen" ist noch schlimmer. Ich dachte, es gibt vielleicht einen Unterschied im Ursprung der Transformation zwischen Webkit und Gecko, aber beide befinden sich standardmäßig in der Mitte des Elements.

Ich habe bereits gesucht, habe aber nur Ergebnisse zu Bildlaufleisten oder sortierbaren Listen gefunden.

Hier ist eine funktionierende Demo meines Problems. Versuchen Sie, es in Safari / Chrome und Firefox anzuzeigen.http: //jsbin.com/ucehu

Ist das ein Fehler im Webkit oder wie die Browser das Webkit rendern?