Разница jQuery для слайдера в Chrome, Firefox и IE

Question

Это общий вопрос о том, как отлаживать специфические особенности браузера.

У меня есть сайт: http://calpolyaias.com/portfolio/scalar-duality#

Это код, который запускает слайдер:

<script type="text/javascript"> 
    function init_jquery_swipe(){ 
     /*If there are no slides, hide slider*/ 
     if(!jQuery(".project-slider").find("li").length){ 
      jQuery(".project-slider").hide(); 
      return true; 
     } 
     /*If there are no slides, hide slider*/ 

     jQuery(".project-slider,.project-slider *").removeAttr("style"); 

     var projectWidth = jQuery('.project-content-top').width(); 
     jQuery('.project-slider ul li').css('width', projectWidth); /*KV CHANGED*/ 

     /*var imagesHeight = jQuery('.project-slider ul li').find('img').height(); 
     jQuery('.project-slider').css('height', imagesHeight);*/ 
     var img_height = []; 
     jQuery('.project-slider ul li').find('img').each(function(el){ 
      img_height.push(parseInt(jQuery(this).height())); 
     }); 
     img_height = Math.min.apply(null,img_height); 
     //jQuery('.project-slider').css('height', img_height+"px"); 

     var slideWidth = jQuery('.project-slider ul li').width(); 
     var currentSlide = 0; 
     var maxSlides = jQuery('.project-slider ul li').length; 
     var speed = 500; 

     var slides; 
     slides = jQuery(".project-slider ul"); 
     if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
      slides.swipe({ 
       triggerOnTouchEnd : true, 
       swipeStatus : swipeStatus, 
       allowPageScroll:"vertical", 
       threshold:75 
      }); 
      jQuery(".slider-arrows").hide(); 
     } 

     function swipeStatus(event, phase, direction, distance) { 
      if(phase=="move" && (direction=="left" || direction=="right")) 
      { 
       if(direction=="left" || direction=="right"){ 
        event.preventDefault(); 
        event.stopPropagation(); 
       } 
       var duration=0; 

       if (direction == "left") 
        scrollImages((slideWidth * currentSlide) + distance, duration); 

       else if (direction == "right") 
        scrollImages((slideWidth * currentSlide) - distance, duration); 

      } 

      else if (phase == "cancel") 
      { 
       scrollImages(slideWidth * currentSlide, speed); 
      } 

      else if (phase =="end") 
      { 
       if (direction == "right") 
        previousImage() 
       else if (direction == "left") 
        nextImage() 
      } 
     } 

     function previousImage() 
     { 
      currentSlide = Math.max(currentSlide-1, 0); 
      scrollImages(slideWidth * currentSlide, speed); 
      jQuery('.project-slider ul li').eq(currentSlide).find('img').css('opacity', 1); 
      jQuery('.project-slider ul li').eq(currentSlide).next().find('img').css('opacity', 0.3); 
     } 

     function nextImage() 
     { 
      currentSlide = Math.min(currentSlide+1, maxSlides-1); 
      scrollImages(slideWidth * currentSlide, speed); 
      //jQuery('.project-slider ul li').eq(currentSlide).next().find('img').css('opacity', 1); 
      jQuery('.project-slider ul li').eq(currentSlide).find('img').css('opacity', 1); 
      jQuery('.project-slider ul li').eq(currentSlide).prev().find('img').css('opacity', 0.3); 
     } 

     function scrollImages(distance, duration){ 

      slides.css("-webkit-transition-duration", (duration/1000).toFixed(1) + "s"); 
      slides.css("-moz-transition-duration", (duration/1000).toFixed(1) + "s"); 
      slides.css("-o-transition-duration", (duration/1000).toFixed(1) + "s"); 
      slides.css("-ms-transition-duration", (duration/1000).toFixed(1) + "s"); 

      var value = (distance<0 ? "" : "-") + Math.abs(distance).toString(); 
      slides.css("-webkit-transform", "translate3d("+value +"px,0px,0px)"); 
      slides.css("-moz-transform", "translate3d("+value +"px,0px,0px)"); 
      slides.css("-o-transform", "translate3d("+value +"px,0px,0px)"); 
      slides.css("-ms-transform", "translate3d("+value +"px,0px,0px)"); 
      if(!Modernizr.csstransforms3d){ 
       jQuery(".slider-holder").scrollLeft(Math.abs(value)); 
      } 
     } 

     /*var projectWidth = jQuery('.project-content-top').width(); 
     jQuery('.project-slider ul li').css('width', projectWidth); 
     jQuery('.project-slider ul li').css('height', img_height - 65); 

     jQuery('.project-slider').css('height', img_height); 
     jQuery('.slider-holder').css('height', img_height - 65);*/ 

     var sliderImgHeight = jQuery('.project-slider').height(); 
     //jQuery('.project-slider ul').find('li iframe').css('height', sliderImgHeight); 
     //jQuery('.slider-holder .slider-arrows a.next-slide').css('left', 500px); /*KV */ 
     //window.alert(jQuery('.slider-holder .slider-arrows a.next-slide').css('left')); 

     jQuery('body').on('click', '.slider-arrows a.next-slide', function(e){ 
      e.preventDefault(); 
      nextImage(); 
     }); 

     jQuery('.slider-holder').on('click', function(e){ 
      e.preventDefault(); 
      nextImage(); 
     }); 



     jQuery('body').on('click', '.slider-arrows a.prev-slide', function(e){ 
      e.preventDefault(); 
      previousImage(); 
     }); 

     jQuery('.project-slider ul li img').imgscale({ 
      scale : 'fit', 
      center : true 
     }); 
     center_image(); 
     function center_image(){ 
      jQuery('.project-slider ul li').find('img').each(function(){ 
       var this_img = jQuery(this); 

       var parent_width = parseInt(this_img.parent().width()/2); 
       var this_img_width = parseInt(this_img.width()/2); 

       var parent_height = parseInt(this_img.parent().height()/2); 
       var this_img_height = parseInt(this_img.height()/2); 

       this_img.css("margin-left",(parent_width - this_img_width) + "px"); 
       this_img.css("margin-top",(parent_height - this_img_height) + "px"); 
      }); 
     } 
    } 

    jQuery('#inner-content').waitForImages(function() { 
     jQuery(".project-slider ul").swipe("destroy"); 
     init_jquery_swipe(); 
     jQuery("a[rel='fancybox_gallery']").fancybox(); 
    }); 

    jQuery(window).resize(function() { 
     jQuery(".project-slider ul").swipe("destroy"); 
     init_jquery_swipe(); 
    }); 

    jQuery(document).ready(function($){ 
     $('.accordion li:first-child').find('a').addClass('active').find('i').removeClass('icon-plus-sign').addClass('icon-minus-sign'); 
     $('.accordion li:first-child').find('.section_content').show(); 

     $('.tabs .tab_buttons > li:first-child').find('a').addClass('active'); 
     $('.tabs .tab_content li:first-child').show(); 
    }); 


</script> 

В Chrome, изображения с помощью ползунка исчезают в то время как слайдер отлично работает на IE и Firefox.

Какое из известных различий для хром и как оно относится к jQuery - с чего начать?

В общем, что такое хорошая процедура для меня, чтобы гвоздь этого и ошибок?

Что-то интересное заключается в том, что изменение размера окна (открытие инструментов разработчика в хромированном виде), похоже, все-таки помешает проблеме.

WordPress тема называется NORDIC, если вы хотите попробовать сковав разницу между этим сайтом и оригинальный шаблон ...

Answer 1

Попробуйте удалить это:

transition: opacity .5s; 
-webkit-transition: opacity .5s; 

от .project-slider ul li img.

или Попробуйте это:

transition: all .5s; 
-webkit-transition: all .5s; 

Answer 2

Попробуйте удалить переполнения скрытые? от вашего CSS для: .project-slider ul li Когда я удаляю это, он работает нормально.