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上完美运行时，滑块上的图像会消失。

Chrome的已知区别是什么以及它如何处理jQuery--我从哪里开始寻找？

总的来说，对我来说，遵循这个和错误的方法对我来说有什么好的程序？

有趣的是，更改窗口大小（在chrome中打开开发人员工具）似乎可以解决问题。

如果您想尝试确定此网站与原始模板之间的差异，则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 当我删除它，它似乎工作正常。

Chrome，Firefox和IE上滑块的jQuery差异

2 个答案: