javascript - safari彈出廣告 - safari憑證設定



為什麼Safari頁面會破壞iOS渲染? (1)

我知道標題不是那麼解釋,但這是故事:我正在開發一個瀏覽器遊戲,主要使用JavaScript和Mapbox庫。

在桌面,Android和iOS上一切都運行良好但在iOS上出現一個問題:在讓遊戲運行幾分鐘之後,手機突然開始出現圖形偽影並顯示大部分文本亂碼。

以下是一些手機開始的照片:

我的問題 是:我的代碼究竟是什麼導致了這個? 內存洩漏? ( LE :事實證明它實際上是內存洩漏)
真正的問題 是:如何通過簡單地瀏覽網頁來完成整個手機的操作? Safari不應該停止這個,或者至少是iOS嗎?

這不是這個特定設備的問題,因為這個問題可以在不同的iPhone設備上重現。 (我對不同的iOS版本不太確定)。

我如何 重現 錯誤:

  1. 打開遊戲(在Safari中)。
  2. 讓它運行3-4分鐘。
  3. 向下滑動通知中心,一切都變得瘋狂。
    我添加了一段 YouTube視頻, 展示瞭如何重現錯誤(在我的iPhone 5C上)。
    似乎問題首先出現在通知中心(如果您從頂部向下滑動菜單)。
    至於現在,這個問題似乎只發生在 iPhone 5C iOS 9.2.1(13D15)上。 它也出現在新的iOS 9.3版本上。

為了 解決 這個問題,我必須:

  1. 關閉Safari應用程序(遊戲選項卡打開)。
  2. 鎖定手機。 解鎖後一切恢復正常。

關於 遊戲 本身的一些細節:

  1. 遊戲顯示一個Mapbox地圖和一些單位(標記)。
  2. Node.js服務器以1滴/秒的速度運行,每次滴答後,更新的遊戲狀態通過Socket.io發送到瀏覽器。
  3. 每次瀏覽器收到遊戲狀態時,它都會相應地更新標記。
  4. *如果您放大或縮小或者選擇它們,遊戲也可能會更新標記。

EDIT2: 發現內存洩漏(如預期)。 修復此洩漏(檢查 undefined _icon)後,問題不再發生。 這意味著,在這些行的某處,觸發了Safari / iOS錯誤。

對於每個聚類的單元(隱藏在MarkerCluster中並與其他單元組合在一起),以下是每個tick的確切調用內容:

    var $icon = $(marker._icon); // marker._icon is undefined because of the clustering

    $icon.html('');

    $icon.append($('<img class="markerIcon" src="' + options.iconUrl + '" />'));

    var iconX = 10;
    var iconY = -10;
    var iconOffset = 0;

    for(var v in this.icons) {
        this.icons[v].css('z-index', + $icon.css('z-index') + 1);
        this.icons[v].css('transform', 'translate3d(' + iconX + 'px,' 
                                + (iconY + iconOffset) + 'px,' + '0px)');
        iconOffset += 20;

        this.icons[v].appendTo($icon);
    }

    // Fire rate icons
    this.attackRateCircle = $('<div class="circle"></div>');
    this.attackRateCircle.circleProgress({
        value: 0,
        size: 16,
        fill: { color: "#b5deff" },
        emptyFill: 'rgba(0, 0, 0, 0.5)',
        startAngle:  -Math.PI / 2,
        thickness: 4,
        animation: false,
    });
    this.attackRateCircle.hide();

    // Create and display the healthbar
    this.healthBar = $('<div>').addClass('healthBar ');
    this.healthBar.css('z-index', $icon.css('z-index'));
    this.healthBarFill = $('<span class="fill">');
    this.healthBar.append(this.healthBarFill);

    $icon.append(this.healthBar);
    $icon.append(this.attackRateCircle);

這是 icons 數組:

this.icons = {
    attack_order: $('<img src="img/attack.png" class="status_icon">'),
    attack: $('<img src="img/damage.png" class="status_icon icon_damage">'),
    hit: $('<img src="img/hit.png" class="status_icon icon_hit">'),
};

circleProgress 調用來自此庫: https://github.com/kottenator/jquery-circle-progresshttps://github.com/kottenator/jquery-circle-progress

DEMO

是的,我已經能夠創建一個重現錯誤的jsFiddle: https://jsfiddle.net/cte55cz7/14/ ://jsfiddle.net/cte55cz7/14/在iPhone 5C上的Safari上打開並等待幾分鐘。 在iPhone 6和iPad mini上頁面崩潰(正如預期的那樣由於內存洩漏)

這是HasteBin中的相同代碼,適用於任何不想運行它的人。

https://ffff65535.com


這個內存洩漏可能是由於'WebKit的JS引擎'如何工作[safari webkit-javascript llvm]

並且看起來像是一個虛擬內存緩衝區溢出,對剩餘的RAM有直接影響(iOS共享和使用它來存儲用戶界面圖形元素)

相對於這段代碼:“[...]發現jQuery內存洩漏很容易。檢查$ .cache的大小。如果它太大,檢查它,看看哪些條目保留,為什麼。[...]”( http://javascript.info/tutorial/memory-leaks

讓我期待它與 for循環相關

for(var v in this.icons) {
    this.icons[v].css('z-index', + $icon.css('z-index') + 1);
    this.icons[v].css('transform', 'translate3d(' + iconX + 'px,' 
                            + (iconY + iconOffset) + 'px,' + '0px)');
    iconOffset += 20;

    this.icons[v].appendTo($icon);
}

假設檢查已完成,並且假設您找到了條目,則可能需要使用 removeData() 手動清理數據,或者您可以先使用 $ elem.detach() 然後放入 $(elem).remove() 在setTimeout中。





artifacts