1

My users have been experiencing freezing issues on their iPads when running my website in standalone mode.

The devices they are using are running iOS 9.2.1.

The device responsiveness appears to gradually get slower and after an hour of use it may even freeze.

Clicking the home button and reopening the webpage in standalone mode will fix/reset the issue.

The webpages my users are viewing in standalone mode contain a handful of inputs (text, radio, checkbox) and a submit button. So the browser is being reloaded several times before freezing.

The page's resources are fairly small, some of the pages may contain an image or two and a font file is imported in the css for icon use.

Does anyone know what could be causing the freezing?

I am under the assumption that it is related to the memory.

Am I able to track the memory usage of an iOS device in standalone mode?

The web inspector tools for Safari are limited compared to Chrome and Safari does not support window.performance.memory.

I have also tried remote debugging using the 'Instruments' app but nothing was recorded in the 'Leaks' tool and I received the error 'Unable to attach to task; port invalid.' when trying to use the Allocation tool.

Is there a different tool I should be using?

Mac
  • 1,025
  • 3
  • 12
  • 22

1 Answers1

1

It appears this is a bug in standalone mode for iOS 9.

I submitted this bug with apple and added it to open radar http://openradar.appspot.com/25109349

If you run the html page below in standalone mode on iOS 9 you will be able to reproduce the issue. After 100+ page loads you will notice a delayed touch response and after 400+ page loads the screen will be completely unresponsive.

Running the snippet won't work in standalone mode so you will have to copy the html and make your own file. You should update the action of the form to the name of the file you make or name your file 'autoSubmitLoop.html'.

<!DOCTYPE html>
<html>
    <head>
        <title>(Auto) iOS 9 standalone mode, page load, unresponsive touch bug</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="mobile-web-app-capable" content="yes" />
    </head>
    <body>
        <h1>Auto submit test</h1>
        <form method="get" action="autoSubmitLoop.html" id="form"  name="form">
            <p>Auto submit at 3s</p>
            <p>Timer: <span id="timer-counter">0</span></p>
            <input type="hidden" id="page" name="page" value="0" />
            <p>Auto submit count: <input type='number' id="page-counter" name="page-counter" value="0" disabled></p>
            <input type="submit" value="Submit" id="submit-button"/>
            <br>
            <br>
            <br>
            <button type="button" onclick="location.reload();">Reload</button>
            <br>
            <br>
        </form>
        <p>Scroll</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>&darr;</p>
        <script>
            (function() {
                var paramArray = window.location.search.substring(1).split("&");
                var time = 3;
                var counter = 0;

                for (var i = 0; i < paramArray.length; i = i + 1) {
                    var pair = paramArray[i].split("=");
                    if (pair[0] === "page") {
                        var nextPage = Number(pair[1]) + 1;
                        document.getElementById('page').value = nextPage;
                        document.getElementById('page-counter').value = nextPage;
                    }
                }

                setInterval(function(){
                    counter = counter + 1;
                    document.getElementById('timer-counter').innerHTML = counter;
                    if(counter >= time){
                        document.getElementById('submit-button').click();
                    }
                },1000);
            })();
        </script>
    </body>
</html>

Here is another example without the form, if you remove the script at the bottom of the html and manually submit the page the issue will still occur.

<!DOCTYPE html>
<html>
    <head>
        <title>(Auto Reload) iOS 9 standalone mode, page load, unresponsive touch bug</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="mobile-web-app-capable" content="yes" />
    </head>
    <body>
        <h1>Auto reload test</h1>
        <p>Auto reload at 3s</p>
        <p>Timer: <span id="timer-counter">0</span></p>
        <br>
        <br>
        <button type="button" onclick="location.reload();">Reload</button>
        <br>
        <br>
        <p>Scroll</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>|</p>
        <p>&darr;</p>
        <script>
            (function() {
                var time = 3;
                var counter = 0;
                setInterval(function(){
                    counter = counter + 1;
                    document.getElementById('timer-counter').innerHTML = counter;
                    if(counter >= time){
                        location.reload();
                    }
                },1000);
            })();
        </script>
    </body>
</html>
Mac
  • 1,025
  • 3
  • 12
  • 22