这是关于如何调试特定于浏览器的怪癖的一般问题。
我有一个网站： 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 ...
答案 0 :(得分：2)
尝试删除此内容：
transition: opacity .5s;
-webkit-transition: opacity .5s;
来自.project-slider ul li img。
或试试这个：
transition: all .5s;
-webkit-transition: all .5s;
答案 1 :(得分：0)
尝试删除溢出隐藏？来自您的CSS：.project-slider ul li
当我删除它，它似乎工作正常。