एक सफारी पेज क्यों आईओएस प्रतिपादन तोड़ रहा है?

Question

मुझे पता है कि शीर्षक व्याख्यात्मक नहीं है, लेकिन यहां कहानी है: मैं एक ब्राउज़र गेम विकसित कर रहा हूं, ज्यादातर जावास्क्रिप्ट और मैपबॉक्स लाइब्रेरी का उपयोग कर रहा हूं।

डेस्कटॉप, एंड्रॉइड और आईओएस पर सबकुछ अच्छी तरह से काम करता है, लेकिन एक समस्या आईओएस पर दिखाई देती है: गेम को कुछ मिनटों तक चलने देने के बाद अचानक फोन में ग्राफिक कलाकृतियां शुरू हो जाती हैं और अधिकांश टेक्स्ट स्क्रैम्बल हो जाते हैं।

यहाँ क्या फोन शुरू होता है की कुछ तस्वीरें देख रहे हैं:

मेरा प्रश्न है: क्या वास्तव में मेरे कोड में यह कारण हो सकता है? एक स्मृति रिसाव? ( ले : यह वास्तव में एक स्मृति रिसाव हो गया है)
असली सवाल यह है: कैसे आता है कि आप लगभग एक वेब पेज ब्राउज़ करके पूरे फोन को ईंट कर सकते हैं? क्या सफारी को यह नहीं रोकना चाहिए, या कम से कम आईओएस?

यह इस विशिष्ट डिवाइस के साथ कोई समस्या नहीं है, क्योंकि यह समस्या विभिन्न iPhone उपकरणों पर पुन: पेश की जा सकती है। (मैं विभिन्न iOS संस्करणों के बारे में निश्चित नहीं हूं)।

मैं त्रुटि को कैसे पुन : पेश कर सकता हूं :

1. खेल खोलें (सफारी के अंदर)।
2. इसे 3-4 मिनट तक चलने दें।
3. नोटिफिकेशन सेंटर को स्लाइड करें और सब कुछ पागल हो जाता है।
   मैंने एक YouTube वीडियो जोड़ा है जिसमें दिखाया गया है कि कैसे मैं अपने iPhone 5C पर त्रुटि को पुन: उत्पन्न कर सकता हूं।
   ऐसा लगता है कि समस्या पहले अधिसूचना केंद्र में दिखाई देती है (यदि आप ऊपर से मेनू को नीचे स्वाइप करते हैं)।
   अभी तक, यह समस्या केवल iPhone 5CiOS 9.2.1 (13D15) पर होती है। यह नए iOS 9.3 वर्जन पर भी होता है।

इस समस्या को ठीक करने के लिए मुझे निम्न करना होगा:

1. सफ़ारी एप्लिकेशन बंद करें (जिसमें गेम टैब खुला है)।
2. फोन को लॉक करें। इसे अनलॉक करने के बाद सब कुछ वापस सामान्य हो जाता है।

खेल के बारे में कुछ विवरण :

1. खेल एक नक्शा बॉक्स नक्शा और उस पर कुछ इकाइयों (मार्कर) से पता चलता है।
2. Node.js सर्वर 1 टिक / सेकेंड पर चलता है और प्रत्येक टिक के बाद अपडेटेड गेम स्टेट को Socket.io के माध्यम से ब्राउज़र को भेजा जाता है।
3. हर बार जब ब्राउज़र गेम स्टेट प्राप्त करता है तो वह उसी के अनुसार मार्करों को अपडेट करता है।
4. * यदि आप ज़ूम इन या आउट करते हैं या आप उनका चयन करते हैं तो गेम मार्कर को भी अपडेट कर सकता है।

EDIT2: मेमोरी लीक मिला (उम्मीद के मुताबिक)। इस रिसाव को ठीक करने के बाद ( undefined_icon के लिए जाँचें) समस्या अब नहीं होती है। इसका मतलब है, कि कहीं न कहीं उन लाइनों के साथ सफारी / आईओएस बग ट्रिगर हो गया है।

यहाँ वही है जो वास्तव में प्रत्येक टिक को कहा जा रहा था, प्रत्येक इकाई के लिए जिसे क्लस्टर किया गया था (एक मार्कर क्लीयर के अंदर छिपा हुआ था और दूसरों के साथ समूहीकृत किया गया था):

    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-progress

डेमो

हाँ, मैं एक jsFiddle बनाने में सक्षम है जो बग को पुन: पेश करता है: https://jsfiddle.net/cte55cz7/14/ iPhone 5C पर सफारी पर खोलें और कुछ मिनटों तक प्रतीक्षा करें। IPhone 6 और iPad मिनी पेज क्रैश (स्मृति रिसाव के कारण अपेक्षित)

यहां HasteBin में वही कोड है, जो कोई भी इसे चलाना नहीं चाहता है।

Comments

पुनश्च: पोस्ट पर सवाल पोस्ट करने के लिए अस्वीकृत होने के बाद एसओ पर पोस्ट किया गया SuperUser। मुझे उम्मीद है कि इस सवाल को पूछने के लिए यह सही जगह है।

— XCS

@wottle मैंने अपने iPhone 5C पर परीक्षण किया, और दूसरे व्यक्ति ने दूसरे iPhone पर (दूसरे महाद्वीप पर: D) का परीक्षण किया, लेकिन मुझे लगता है कि उसका मॉडल भी 5C है (और वह वह था जिसने वास्तव में मुझे उन कलाकृतियों के बारे में बताया था)। मैं कल आईफोन 6 और आईपैड मिनी पर परीक्षण करूंगा।

— XCS

मेरे iPhone 6 पर पुन: पेश नहीं करता है। यह CG में एक बग हो सकता है। आप हार्डवेयर जानकारी के साथ सभी ios संस्करण जानकारी पोस्ट कर सकते हैं?

— फ्रेशेयबेल 16

वाह! और मैं Windows 10 पर स्क्रीन फाड़ सोचा मोबाइल बुरा था ...

— BoltClock

क) मैं भी पागल नहीं हूँ। वह आश्चर्यजनक है। बी) मुझे आश्चर्य है कि अगर यह वास्तव में एक शोषण के रूप में इस्तेमाल किया जा सकता है, क्योंकि आप स्पष्ट रूप से स्मृति तक पहुँचने में सक्षम होना चाहिए, और सी) मुझे लगता है कि यह दिलचस्प है कि सब कुछ हमेशा बाईं ओर झुका हुआ है। यह मुझे सुझाव देता है कि किसी कारण से आप या तो कुछ बनावटों की पिचों (उर्फ स्ट्राइड्स) को बढ़ा रहे हैं या GPU के पिच तर्क को संशोधित कर रहे हैं। हालांकि एक सफारी / आईओएस / फर्मवेयर बग निश्चित रूप से।

— 0x24a537r9

Answer 1

यह मेमोरी लीक संभवत: इस कारण से है कि 'WebKit का JS Engine' कैसे काम करता है [सफारी webkit-javascript llvm]

और वास्तव में एक वर्चुअल मेमोरी बफर-ओवरफ़्लो की तरह दिखता है, शेष रैम (उपयोगकर्ता इंटरफ़ेस ग्राफिकल तत्वों को संग्रहीत करने के लिए आईओएस द्वारा साझा और इसका उपयोग किया गया) पर सीधा प्रभाव पड़ता है।

कोड के टुकड़े के सापेक्ष: "[...] jQuery मेमोरी लीक को खोजना आसान है। $ .cache का आकार जांचें। यदि यह बहुत बड़ा है, तो इसका निरीक्षण करें और देखें कि कौन सी प्रविष्टियां रहती हैं और क्यों ... [...]" ( http://javascript.info/tutorial/memory-leaks )

मुझे उम्मीद है कि यह पाश के लिए सापेक्ष है :

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);
}

मानकर निरीक्षण किया जाता है, और इस तथ्य को भी मानते हुए कि आप प्रविष्टियाँ पाते हैं, आप डेटा को मैन्युअल रूप से हटाने के साथ हटा सकते हैं () या आप पहले $ elem.detach () का उपयोग कर सकते हैं और फिर $ (elem) .remove () डाल सकते हैं। सेट टाइमआउट में।