頁面在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。