Moving a div left or right on homepage in Safari 6 on OS X creates artifacts

Website: http://www.laederach.com/chde/sortiment.html Browser: Safari 6 on OS X Lion Here you have a scroll-able content in the center of the page. It works perfect in every Web-browser except for Safari on OS X. Somehow when scrolling left or right, Safari isn't updating the background fast enough and creates white artifacts (body background is white). How can i stop safari from moving the background of the page? Chrome is doing it right. That's the code which is doing the magic: /*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(); } } }); } You better check-out the html on the page, would be too much for here. Thank you all in advance I can't answer my Question at the moment but i have found the problem by accident. See comment below.

以上就是Moving a div left or right on homepage in Safari 6 on OS X creates artifacts的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏