页面在Chrome，Firefox和IE中正常工作，但导致iPad Safari上出现闪烁或崩溃

Question

我正尝试使用jQuery和CSS3创建内容滑块。

This是我的代码。 Chrome在Chrome中运行良好，在Firefox中几乎没有问题，并且在IE中运行正常（但几乎没有影响）。

但它不是在iPad的Safari浏览器的工作...

页面在iPad的Safari浏览器完成加载，页面开始闪烁（连续，永远不会完成），然后浏览器崩溃！

但我找不到它的my slider部分有问题，我不知道是什么问题到底是...

很抱歉，如果我的代码是乱，但我找不到什么问题是，所以我不能做一个简单的例子...

---

更新

我的代码有window.resize jQuery的事件，我打电话CorrectPages()它里面。

我已经把这段代码在该事件的第一行：alert("windowResize" + window.innerWidth + " , " + window.innerHeight);

在PC，没有警报，直到我调整窗口的大小。但在iPad中，警报是在页面加载后开始的。这是iPad上的消息：

windowResize1767 , 1074 
windowResise1767 , 2078 
windowResize2099 , 4136 
windowResize2099 , 8355 
windowResize2099 , 17004 
windowResize2099 , 34735 
... 

---

更新2

正如ahmadali说，现在我们固定前面的问题。 This is my fixed code。但现在，还有另一个问题：当页面加载时，Safari告诉错误window.innerWidth和window.innerHeight。

当页面加载时，它看起来是正确的，但随后它会改变。这是一段时间后的结果：

你的想法是什么？

Answer 1

马赫迪，

我看不出任何明显，但效率可能是一个问题。一船改进是可能的。

以下是一些一般的指针：

• 认沽全局beginX，beginY等$(document).ready(function(){...})闭包内。
• 尽量减少查找DOM节点的需求 - 缓存jQuery对象并尽可能使用方法链接。
• .removeclass（）将删除多个空格分隔的类。不需要单独的陈述
• $("#d_page" + i + " #overlay")令人担忧。 ids应该是唯一的，为什么不是$("#overlay")或$(".... .overlay")？
• 让jQuery方法.eq()和.not()做了一些辛苦的工作。
• 给页面class =“page”。让$pages = $(".page")，然后$("#d_page" + i.toString())应简化为$pages.eq(i)。这种类型的许多表达式将会简化。

通过逐步改进，我将功能correctPages()从大约170多行减少到了26行。

这是我结束了：

function correctPages() { 
    var $pages = $(".page"),//relies on pages having class="page" 
     prefix = (isLandscape(window.innerWidth, window.innerHeight)) ? 'd_landscape_activepage_' : 'd_portrait_activepage_', 
     classes = ["whitebackground", prefix+"1", prefix+"2", prefix+"3", prefix+"4"].join(' '), 
     $np = [$pages.eq(currentPage), $pages.eq(nextPage(currentPage)), $pages.eq(nextPage(nextPage(currentPage))), $pages.eq(nextPage(nextPage(nextPage(currentPage))))]; 
    $pages.removeClass(classes); 
    $pages.find(".overlay").css({top:0, opacity: 0.6});//relies on overlays having class="overlay" 
    $pages.not($np[0]).not($np[1]).not($np[2]).addClass(prefix+"1"); 
    $pages.not($np[2]).removeClass(prefix+"5").addClass("transition"); 
    $pages.eq(prevPage(currentPage)).addClass(prefix+"2"); 
    $np[0].addClass(prefix+"3").find(".overlay").css("opacity", "0.1"); 
    $np[1].addClass(prefix+"4"); 
    $np[2].addClass(prefix+"5"); 
    $np[isNext ? 2 : 3].removeClass("transition"); 
    setTimeout(function() { 
     $np[2].addClass("transition"); 
    }, 100); 
    $(".articlecontent").css("background", "rgba(250,250,250,0)"); 
    $(".d_landscape_activepage_3 .articlecontent").css("background", "rgba(250,250,250,1)"); 
    $(".d_portrait_activepage_3 .articlecontent").css("background", "rgba(250,250,250,1)"); 
    correctDivs(); 
    $("#d_pagefix").css("opacity", "0"); 
    setTimeout(function() { 
     $np[0].find(".overlay").css("top", "10000px"); 
    }, 400); 
} 

此代码是未经测试，可能不是100％正确的，但应该给你一些线索，如何可以改善。

编辑

的解决方法是调整大小事件的持续再触发尝试拆卸和重新安装动态调整大小的处理程序。

替换：

$(window).resize(function() { 
    correctPages(); 
}); 

用;

function attachResizeHandler() { 
    $(window).on('resize', resizeHandler); 
} 
function resizeHandler() { 
    $(window).off('resize'); 
    correctPages(); 
    setTimeout(attachResizeHandler, 600); 
} 

我选择了600毫秒，因为它比正确的页面或checkhash代码中的最长超时稍长。取决于究竟是什么触发不需要的调整大小事件，您可能会少一些。

在别处在代码，替换的所有实例：

`correctPages();` 

与：

`resizeHandler();` 

的resizeHandler初始附着然后将发生时checkhash();被称为上页面加载。

Answer 2

嗯，我和Mahdi用iPad测试了很多代码，最后我们明白问题是从JqueryMobile。我有这个代码

$(window).resize(function() { 
    $('#log').append('<div>Handler for .resize() called.</div>'+$(window).height()+","+$(window).width()); 
});​ 

，当我没有iPad的增加JqueryMobile参考页面没有改变，没有什么运行它添加到(code)页面。

但是，当我在iPad中添加对JqueryMobile的引用时，它总是添加新页面大小(code)。

我认为这对于多平台网络程序员来说是一个非常重要的缺陷JqueryMobile。我报了here。