Javascript Firefox 18.0.1中的动画闪烁（由于RequestAnimationFrame？）

我使用本教程为我们的一位客户创建了介绍：

它过去在所有浏览器上都工作得很好。然而，当我更新到Firefox的最新稳定版本（FF 18.0.1）时，在更改图像时会出现严重的闪烁

在阅读最新版本的发行说明时，我看到ff有一个新的Javascript引擎，并通过一个新的HTML缩放算法提高了图像质量。也许是因为这个？其他可能的解决方案

下面您可以看到我使用的代码：

$(document).ready(function(){
        var $doc = $(document);
        var $win = $(window);

        // dimensions - we want to cache them on window resize
        var windowHeight, windowWidth;
        var fullHeight, scrollHeight;
        var streetImgWidth = 1024, streetImgHeight = 640;
        calculateDimensions();

        var currentPosition = -1, targetPosition = 0;
        var $videoContainer = $('.street-view');
        var video = $('.street-view > img')[0];
        var $hotspotElements = $('[data-position]');


        // handling resize and scroll events

        function calculateDimensions() {
            windowWidth = $win.width();
            windowHeight = $win.height();
            fullHeight = $('#main').height();
            scrollHeight = fullHeight - windowHeight;
        }

        function handleResize() {
            calculateDimensions();
            resizeBackgroundImage();
            handleScroll();
        }

        function handleScroll() {
            targetPosition = $win.scrollTop() / scrollHeight;
        }

        // main render loop
        window.requestAnimFrame = (function(){
          return  window.requestAnimationFrame       ||
                  window.webkitRequestAnimationFrame ||
                  window.mozRequestAnimationFrame    ||
                  window.oRequestAnimationFrame      ||
                  window.msRequestAnimationFrame     ||
                  function(/* function */ callback, /* DOMElement */ element){
                    window.setTimeout(callback, 1000 / 60);
                  };
        })();


        function animloop(){
            if ( Math.floor(currentPosition*5000) != Math.floor(targetPosition*5000) ) {
                currentPosition += (targetPosition - currentPosition) / 5;
                render(currentPosition);
            }
          requestAnimFrame(animloop);
        }






        // rendering


        function render( position ) {
            // position the elements
            var minY = -windowHeight, maxY = windowHeight;
            $.each($hotspotElements,function(index,element){
                var $hotspot = $(element);
                var elemPosition = Number( $hotspot.attr('data-position') );
                var elemSpeed = Number( $hotspot.attr('data-speed') );
                var elemY = windowHeight/2 + elemSpeed * (elemPosition-position) * scrollHeight;
                if ( elemY < minY || elemY > maxY ) {
                    $hotspot.css({'visiblity':'none', top: '-1000px','webkitTransform':'none'});
                } else {
                    $hotspot.css({'visiblity':'visible', top: elemY, position: 'fixed'});
                }
            });


            renderVideo( position );
        }



        function resizeBackgroundImage(){
            // get image container size
            var scale = Math.max( windowHeight/streetImgHeight , windowWidth/streetImgWidth );
            var width = scale * streetImgWidth , height = scale * streetImgHeight;
            var left = (windowWidth-width)/2, top = (windowHeight-height)/2;
            $videoContainer
                      .width(width).height(height)
                      .css('position','fixed')
                      .css('left',left+'px')
                      .css('top',top+'px');
        }





        // video handling

        var imageSeqLoader = new ProgressiveImageSequence( "street/vid-{index}.jpg" , 387 , {
            indexSize: 4,
            initialStep: 16,
            onProgress: handleLoadProgress,
            onComplete: handleLoadComplete,
            stopAt: 1
        } );
                    // there seems to be a problem with ie 
                    // calling the callback several times
        var loadCounterForIE = 0; 
        imageSeqLoader.loadPosition(currentPosition,function(){
            loadCounterForIE++;
            if ( loadCounterForIE == 1 ) {
                renderVideo(currentPosition);
                imageSeqLoader.load();
                imageSeqLoader.load();
                imageSeqLoader.load();
                imageSeqLoader.load();
            }
        });


        var currentSrc, currentIndex;

        function renderVideo(position) {
            var index = Math.round( currentPosition * (imageSeqLoader.length-1) );
            var img = imageSeqLoader.getNearest( index );
            var nearestIndex = imageSeqLoader.nearestIndex;
            if ( nearestIndex < 0 ) nearestIndex = 0;
            var $img = $(img);
            var src;
            if ( !!img ) {
                src = img.src;
                if ( src != currentSrc ) {
                    video.src = src;
                    currentSrc = src;
                }
            }
        }



        $('body').append('<div id="loading-bar" style="">Loading...</div>');

        function handleLoadProgress() {
            var progress = imageSeqLoader.getLoadProgress() * 100;
            $('#loading-bar').css({width:progress+'%',opacity:1});
        }

        function handleLoadComplete() {
            $('#loading-bar').css({width:'100%',opacity:0,display: "none"});
            $("html, body").css("overflow", "auto");
            $("html, body").css("overflow-x", "hidden");
            $("nav").css("display", "block");
            $("#preloader").fadeOut("slow");
            $("#scroll-hint").css("display", "block");
        }




        $win.resize( handleResize );
        $win.scroll( handleScroll );

        handleResize();
        animloop();




    });

$（文档）.ready（函数（）{
var$doc=$（文档）；
var$win=$（窗口）；
//维度-我们希望在调整窗口大小时缓存它们
var窗口高度、窗口宽度；
var-fullHeight，scrollHeight；
变量streetImgWidth=1024，streetImgHeight=640；
计算尺寸（）；
var currentPosition=-1，targetPosition=0；
变量$videoContainer=$（“.street view”）；
var video=$（'.street view>img'）[0]；
var$hospotements=$（“[数据位置]”）；
//处理调整大小和滚动事件
函数计算维度（）{
windowWidth=$win.width（）；
windowHeight=$win.height（）；
全高=$（“#main”）.height（）；
scrollHeight=全高-窗高；
}
函数handleResize（）{
计算尺寸（）；
调整BackgroundImage（）的大小；
handleScroll（）；
}
函数handleScroll（）{
targetPosition=$win.scrollTop（）/scrollHeight；
}
//主渲染循环
window.requestAnimFrame=（函数（）{
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
函数（/*function*/callback，/*doElement*/element）{
设置超时（回调，1000/60）；
};
})();
函数animloop（）{
如果（数学地板（当前位置*5000）！=数学地板（目标位置*5000））{
currentPosition+=（targetPosition-currentPosition）/5；
渲染（当前位置）；
}
请求动画帧（animloop）；
}
//渲染
函数渲染（位置）{
//定位元素
var minY=-windowHeight，maxY=windowHeight；
$。每个（$热点元素、函数（索引、元素）{
var$spotspot=$（元素）；
var elemPosition=Number（$hotspot.attr（'data-position'））；
var elemSpeed=Number（$hotspot.attr（'data-speed'））；
var elemY=窗口高度/2+电子速度*（电子位置）*滚动高度；
if（elemYmaxY）{
$hotspot.css（{'visibility'：'none'，top:'-1000px'，'webkitttransform'：'none'}）；
}否则{
$hotspot.css（{'visiblity'：'visible'，top:elemY，position:'fixed'}）；
}
});
renderVideo（位置）；
}
函数resizeBackgroundImage（）{
//获取图像容器大小
var scale=数学最大值（窗高/街道高度，窗宽/街道宽度）；
变量宽度=比例*streetImgWidth，高度=比例*streetImgHeight；
var left=（窗宽）/2，top=（窗高）/2；
$videoContainer
.宽度（宽度）.高度（高度）
.css（'位置'，'固定'）
.css（'left'，left+'px'）
.css（'top'，top+'px'）；
}
//视频处理
var imageSeqLoader=new ProgressiveImageSequence（“street/vid-{index}.jpg”，387{
索引大小：4，
初始步骤：16，
onProgress:handleLoadProgress，
未完成：手动加载完成，
停留时间：1
} );
//ie似乎有问题
//多次调用回调
var-loadcounterporie=0；
imageSeqLoader.loadPosition（当前位置，函数（）{
loadCounterForIE++；
if（loadCounterForIE==1）{
renderVideo（当前位置）；
imageSeqLoader.load（）；
imageSeqLoader.load（）；
imageSeqLoader.load（）；
imageSeqLoader.load（）；
}
});
var currentSrc，currentIndex；
功能renderVideo（位置）{
var指数=数学圆整（currentPosition*（imageSeqLoader.length-1））；
var img=imageSeqLoader.getNearest（索引）；
var nearestIndex=imageSeqLoader.nearestIndex；
如果（nearestIndex<0）nearestIndex=0；
var$img=$（img）；
var-src；
如果（！！img）{
src=img.src；
如果（src！=当前src）{
video.src=src；
currentSrc=src；
}
}
}
$（'body'）.append（'Loading…'）；
函数handleLoadProgress（）{
var progress=imageSeqLoader.getLoadProgress（）*100；
$（'#加载条'）.css（{width:progress+'%'，opacity:1}）；
}
函数handleLoadComplete（）{
$（'#加载栏'）.css（{宽度：'100%，不透明度：0，显示：“无”}）；
$（“html，body”）.css（“溢出”、“自动”）；
$（“html，body”）.css（“overflow-x”，“hidden”）；
$（“导航”）.css（“显示”、“块”）；
$（“#预加载”）。淡出（“缓慢”）；
$（“#滚动提示”）.css（“显示”、“块”）；
}
$win.resize（handleResize）；
$win.scroll（手卷）
            if ( elemY < minY || elemY > maxY ) {
                $hotspot.css({'visiblity':'none', top: '-1000px','webkitTransform':'none'});
            } else {
                $hotspot.css({'visiblity':'visible', top: elemY, position: 'fixed'});
            }