Javascript 在OSX上的Safari6中，在主页上向左或向右移动div会创建工件

网站： 浏览器：OSXLion上的Safari6

在页面中央有一个可滚动的内容。除了OSX上的Safari外，它在所有Web浏览器中都能完美地工作。不知何故，当向左或向右滚动时，Safari没有足够快地更新背景，并且会创建白色工件。背景是白色的

如何阻止safari移动页面背景？Chrome做得很好

这就是神奇的代码：

    /*Slider at SortimentArea*/
function initSlider(){
     //$('#sortimentScrollbar').tinyscrollbar({ axis: 'x', size: 953 });
    //Scroll Drag
    var dragLimit = 1270;
    var scrollbarWidth = 945;
    var scrollbarThumbWith;
    var thumbPos;
    var thumbPosSave;
    thumbPos = $('.thumb').css("left");
    //thumbPosSave = $('.thumb').data('savePoint', thumbPos);

    //Calc size of scrollbar  
    if(scrollbarWidth > $('#sortimentScrollbar .overview').width()){
      $('.scrollbar .thumb').width(scrollbarWidth);  
    }else{
      $('.scrollbar .thumb').width( dragLimit * scrollbarWidth/$('#sortimentScrollbar .overview').width());     
      $('.thumb').css("left", 40);
    }  

  scrollbarThumbWidth = $('.scrollbar .thumb').width();

  //howAllImageInstant;


  //Set positions for scrollbar and sortiment if coming back from productpage
  setOldScrollbarAndSortimentPosition();
  if (($('.scrollbar .thumb').css("left").replace('px','')- -1*($('.scrollbar .thumb').css("width").replace('px',''))) > $('.scrollbar').css("width").replace('px',''))
    {
      //alert("bigger");
    }
    //Prevent Links from firing on move
    $('#sortimentScrollbar .overview a').click(function(){
      if($('#sortimentScrollbar .overview').data('down')){
        return false;
      }
  });

    //Set up the Moving Pane
    $('#sortimentScrollbar .overview').mousedown(function(event){
      event.preventDefault();
      $(this)
        .data('down', true)
        .data('x', event.clientX)
        .data('left', -1*$(this).position().left);
      return false;
    }).mouseup(function(event){
      event.preventDefault();
      $(this)
        .data('down', false);
    }).mousemove(function(event){      
      event.preventDefault();
      if($(this).data('down') == true){
        var pos = $(this).data('left') + $(this).data('x') - event.clientX;
        if(pos <= $(this).width()-dragLimit && pos >= 0){
          $(this).css('left', -1*(pos));
          $('.scrollbar .thumb').css('left', (scrollbarWidth/$('#sortimentScrollbar .overview').width())*pos);  
      savePositionsOfScrollingElements();
        }
      }
    }).mouseleave(function(event){
      $(this)
        .data('down', false);
    })

    .bind("touchstart", function(event){
      event.preventDefault();
      $(this)
        .data('down', true)
        .data('x', event.pageX)
        .data('left', -1*$(this).position().left);
      return false;
    }).bind('touchend', function(event){
      event.preventDefault();
      $(this)
        .data('down', false);
    }).bind('touchmove', function(event){
      event.preventDefault();
      if($(this).data('down') == true){
        var pos = $(this).data('left') + $(this).data('x') - event.pageX;
        if(pos <= $(this).width()-dragLimit && pos >= 0){
          $(this).css('left', -1*(pos));
          $('.scrollbar .thumb').css('left', (scrollbarWidth/$('#sortimentScrollbar .overview').width())*pos);          
          savePositionsOfScrollingElements();
        }
      }
    });

  //Set up the Scrollbar
  $(".scrollbar").click(function(event){
    window.setScrollbarViaClick = true;
    var x = event.pageX - $(this).offset().left;
    var windowWidth = $(window).width();
    var leftValueCorrention = 0;
  if (window.isSlide != true)
  {
    $newThumbLeftValue = 0
    if ((x-(leftValueCorrention +($(".thumb").css("width").replace('px','')/2))) < 0)
      {
      $newThumbLeftValue = 0;
      //$(".thumb").css("left",0);
        }
      else if((x-(leftValueCorrention +($(".thumb").css("width").replace('px','')/2)))-(-1*$(".thumb").css("width").replace('px','')) > $(".scrollbar").css("width").replace('px',''))
      {
      $newThumbLeftValue = $(".scrollbar").css("width").replace('px','')-$(".thumb").css("width").replace('px','')-10;
        //$(".thumb").css("left",$(".scrollbar").css("width").replace('px','')-$(".thumb").css("width").replace('px','')-10);
      }
      else
      {
      $newThumbLeftValue = x-(leftValueCorrention +($(".thumb").css("width").replace('px','')/2));
      //$(".thumb").css("left",x-(485+($(".thumb").css("width").replace('px','')/2)));   
     }
     $(".thumb").animate({
      left: $newThumbLeftValue
    }, 200, function(){});

    $newOverviewLeft = -1*($(".overview").css("width").replace('px','')/$(".scrollbar").css("width").replace('px','')*$newThumbLeftValue);
    $(".overview").animate({
      left: $newOverviewLeft
    }, 200, function(){savePositionsOfScrollingElements()});
    $(".overview").css("left",$newOverviewLeft);
    // $(".overview").css("left",-1*($(".overview").css("width").replace('px','')/$(".scrollbar").css("width").replace('px','')*$(".thumb").css("left").replace('px','')));
  }
    window.isSlide = false;
  });

  $('.scrollbar .thumb').mousedown(function(event){
    window.isSlide = true;
      event.preventDefault();
      $(this)
        .data('down', true)
        .data('x', event.clientX)
        .data('left', -1*$(this).position().left);
      return false;
    }).bind('touchstart', function(event){
      event.preventDefault();
      $(this)
        .data('down', true)
        .data('x', event.pageX)
        .data('left', -1*$(this).position().left);
      return false;
    }).bind('touchend', function(event){
      event.preventDefault();
      $('.scrollbar .thumb').data('down', false);
    }).bind('touchmove', function(event){
      event.preventDefault();
      if($('.scrollbar .thumb').data('down') == true){
        var posBar = -1*($('.scrollbar .thumb').data('left') + $('.scrollbar .thumb').data('x') - event.pageX);
        if(posBar <= scrollbarWidth-scrollbarThumbWidth && posBar >= 0){
          $('.scrollbar .thumb').css('left', posBar);
          var visPos = -1*(($('#sortimentScrollbar .overview').width()*posBar)/scrollbarWidth);
          $('#sortimentScrollbar .overview').css('left', visPos);
      savePositionsOfScrollingElements();
        }
      }
  });

    $('#bgDiv').mouseup(function(event){
      $('.scrollbar .thumb').data('down', false);
    }).mousemove(function(event){
      event.preventDefault();
      if($('.scrollbar .thumb').data('down') == true){
        var posBar = -1*($('.scrollbar .thumb').data('left') + $('.scrollbar .thumb').data('x') - event.clientX);
        if(posBar <= scrollbarWidth-scrollbarThumbWidth && posBar >= 0){
          $('.scrollbar .thumb').css('left', posBar);
          var visPos = -1*(($('#sortimentScrollbar .overview').width()*posBar)/scrollbarWidth);
          $('#sortimentScrollbar .overview').css('left', visPos);          
      savePositionsOfScrollingElements();
        }
      }
    });

  }

你最好检查一下网页上的html，这对这里来说太多了

提前谢谢大家

我现在不能回答我的问题，但我偶然发现了这个问题。请参阅下面的评论。

试试这个：

background-position:fixed;

---

问题是我曾经用-webkit转换来修复一个Chrome错误，该错误导致有时无法显示图像。 这个黑客使用了-webkit转换：scale1

---

禁用此CSS属性修复了Safari中的问题，Safari不需要这种攻击。

问题是我用来修复Chrome错误的-webkit转换，该错误导致有时无法显示图像。这个黑客使用了-webkit转换：scale1；禁用此CSS属性可以修复Safari中的问题，而Safari无论如何都不需要这种攻击。