css - jsmovieスプライト画像のサイズ変更が間違っている

Question

jsMovie ( http://jsmovie.konsultaner.de/#/ ) を使用してスプライト アニメーションを作成しようとしています。デスクトップ ブラウザでは正常に動作しますが、モバイル デバイスでは奇妙な動作をします。

テストをセットアップしました: http://www.virtualgraphicstudio.com/test/低速の fps 比で、モバイル デバイスで問題を見つけることができます。モバイル ブラウザがスライス ディメンションを間違って取得しているように見えますが、その理由がわかりません。

これが私のコードです：

        $('#battery').jsMovie({
            images : ['battery.jpg'],
            folder : 'sprites/',
            height : 394, width: 700,
            grid   : {height:394, width:700, columns:20, rows:8},
            showPreLoader : false,
            playOnLoad    : true,
            playBackwards : false,
            repeat: true,
            fps:5
        });


        $('#battery').jsMovie('addClip','battery_in',1,120);
        $('#battery').jsMovie('addClip','battery_loop',121,125);

        $('#battery').on('ended', function() {
            $('#battery').jsMovie('playClip', 'battery_loop', true, true);
        });

そしてhtml

<div id="wrapper" style="position: relative; top: 0; left: 0; width:700px; height: 394px; background-color:red">
    <div id="image"></div>
    <div id="hotspots" style="z-index: 1"></div>        
    <div id="videos" style="z-index: 2; position: absolute; top: 0; left: 0; width:700px; height: 394px; background-color:green">
        <div id="battery"></div>
    </div>
</div>