Polymer app not loading on iOS 8

[DartBot]

<img src="https://avatars.githubusercontent.com/u/3472245?v=3" align="left" width="96" height="96"hspace="10"> Issue by markhats
Originally opened as dart-lang/sdk#21629

---

I have a Polymer app that is refusing to load properly on iOS 8 Safari. It works on all other browsers/devices including iOS 8 Chrome and iOS 7 Safari. I have produced a much smaller app which exhibits the same problem, although this one does seem to load OK sometimes.

On startup, the static parts of the page are displayed but none of the Polymer elements appear and the app remains non-functional. It seems to be something to do with the call to initPolymer. My main function looks like this:

void main()
{
   window.alert("Inside main");

   var dirtycheckingzone = initPolymer();

   window.alert("initPolymer called: dirtycheckingzone = $dirtycheckingzone");

   // Run the whole app in the dirty checking zone so that observables are always updated in the DOM
   dirtycheckingzone.run(() {
      window.alert("Inside dirtycheckingzone.run");

      Polymer.onReady.then((e){
         window.alert("Polymer Ready");
      });
   });
}

On iOS 8 Safari, only the first alert ever gets displayed. Therefore it seems the problem must be somewhere in initPolymer. However, I have no idea how to debug this. I have tried remote debugging to iOS Safari from the Mac version of Safari. However, I can't seem to get this to break early enough and refreshing the page generally causes the Web Inspector to hang, There is nothing however in the Console that looks suspicious.

You can seem to get this smaller app to run by clicking "Refresh". However, if you close the tab and browse to the page again in a new one, it fails again.

You can try the page at:

http://www.autograph-maths.com/deepquerytest/deepquerytest.html

The project is attached. Ignore the functionality of the app. It was primarily created for another test.

---

Attachment:
DeepQueryTest2.zip (1.62 MB)

[DartBot]

<img src="https://avatars.githubusercontent.com/u/1343914?v=3" align="left" width="48" height="48"hspace="10"> Comment by sgjesse

---

Added Area-Pkg, Pkg-Polymer, Triaged labels.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/3472245?v=3" align="left" width="48" height="48"hspace="10"> Comment by markhats

---

This problem still seems to exist in latest dev release of Dart and also Bleeding Edge 1.9.0.edge_043998.

I have done a bit more investigation and have a test case that fails at:

http://www.autograph-maths.com/webversion-ipadtest/autograph.html

This only fails in Safari on some iOS devices. I have 3 iPads to test on, all on iOS 8.1.3, and it fails on 2 of them and succeeds on the other one. I am now listening to 'window.onerror' outside of my Dart code to see if any errors occur. These are displayed as alerts. On the two devices that fail I do get two errors of the form:

Error: TypeError: Attempted to assign to readonly property (see attached images)

The first seems to occur in the eval function in my main dart2js generated js file.

 eval$1: function(code) {
 ....

 finally {
        this._isExecutingEvent = false;
        init.globalState.currentContext = H.interceptedTypeCheck(old, "$is_IsolateContext");
        if (old != null)
          $ = old.get$isolateStatics();
        if (this._scheduledControlEvents != null)
          for (; t1 = this._scheduledControlEvents, !t1.get$isEmpty(t1);) <<<<<<<<<<<< This is line 1768
            this._scheduledControlEvents.removeFirst$0().call$0();
      }
      return result;
    }

The second error occurs in webcomponents.js at the following code:

function MutationRecord(type, target) {
      this.type = type; <<<<<<<<<<<<< This is line 583
      this.target = target;
      this.addedNodes = new wrappers.NodeList();
      this.removedNodes = new wrappers.NodeList();
      this.previousSibling = null;
      this.nextSibling = null;
      this.attributeName = null;
      this.attributeNamespace = null;
      this.oldValue = null;
    }

Does this offer any more clues?

Also see:
https://groups.google.com/a/dartlang.org/forum/#!topic/web/b9c9BPjOO34
https://groups.google.com/a/dartlang.org/forum/#!topic/web/Jo9N8PBaIXQ

---

Attachments:
iOS-Error-1.png (23.77 KB)
iOS-Error-2.png (24.82 KB)

[DartBot]

<img src="https://avatars.githubusercontent.com/u/3472245?v=3" align="left" width="48" height="48"hspace="10"> Comment by markhats

---

I think this may be related to:

emberjs/ember.js#5606

and

uhop/dcl#15

I have discovered that it only seems to fail on iOS 8 32-bit devices, i.e. anything up to and including 4th generation iPads. There is also a Polymer bug mentioned in the above links:

https://github.com/Polymer/platform/issues/66

However, this is no longer accessible and I'm not sure where it was moved to.

This jsfiddle seems to exhibit the same symptoms and fails on the same devices as my app:

http://jsfiddle.net/adrian_vasiliu/ftyafr0d/

[aslanvaroqua]

I'm having this same issue using Polymer dart in ios 8. No matter what I do I get error along the lines of Attempted to assign to read only property. Only starts working when I remove all polymer component imports. Is there any intention to actually get this bug fixed?

[kaede28]

I am getting the same error as both markhats and aslanvaroqua are reporting.

[markhats]

I'm not convinced anyone is looking at bugs in the current version of Polymer (0.16) any more. I have some others outstanding that have not seen any action at all, which is quite frustrating.

The good news is that this problem does seem to have been fixed in iOS9 Beta, although obviously this doesn't help for iOS8 users.