Many aurelia libraries are broken in iOS 16

[jded76]

I'm submitting a bug report

• Library Version:
  aurelia-bootstrapper: 2.3.3

Please tell us about your environment:

• Operating System:
  OSX 16

• Node Version:
  14.16.0

• NPM Version:
  6.14.11

• Aurelia CLI OR JSPM OR Webpack AND Version
  CLI 1.3.1 | webpack 4.46.0

• Browser:
  iOS 16 Safari

• Language:
  all

Current behavior:
After the new IOS 16, Safari has a weird behavior in Aurelia, causing many libraries to fail at the detached event.
After some searching I found that the ownerdocument of the element is an empty one (about:blank) and many libraries that do cleanup at the detached event are getting errors. More details can be found here .

There is also a repro on the issue 808 of aurelia-kendoui-bridge
aurelia-ui-toolkits/aurelia-kendoui-bridge#808

Expected/desired behavior:

Be compatible with Safari.

• What is the motivation / use case for changing the behavior?
  Can we do something to be compatible again with the new Safari?

[bigopon]

I'm not able to guess what has started to fail. ownerDocument suddenly becomes null seems to be an error on Safari part more than Aurelia. This probably is not specific to Aurelia, many others will start to fail as well. Does this happen only when you start navigating away from a page?

[jded76]

I thought the same (that this is not specific to Aurelia) and I tried to find any issues with Safari 16 on other frameworks or whatever, but I couldn't find anything.
I just tested with a component (with if.bind) and it is not happening in the detached event.
So it seems you are right, it only happens when you are navigating to another page.

You can see this repo if you like to test anything.
I have installed Playwright, so you can test it without IOS.

[Tamu]

I also have issues with Safari 16 too, but I'm not sure it's the same reason.

Here is my repo (close to jded76 repo but with Fast)

and the bug in a nice animation :
https://user-images.githubusercontent.com/5020311/196905608-6971e194-df3c-4ef8-b0b2-fd86cc00b975.mp4

How can I help to find a solution???

[bigopon]

Thanks @Tamu, nice 🙂
I suspect this is the prevent default call that is causing the issue. Can you try to returm true from inside the emailChanged?

[Tamu]

Awesome @bigopon, if I add if.bind=true in the component it works !

<fast-text-field if.bind="true" type="text" value.bind="email" change.trigger="emailChanged()"></fast-text-field>

On the other hand if I add return true in emailChanded it does not change anything

  emailChanged() {
    return true;
  }

[bigopon]

@Tamu can you help check the console to see if there is any errors for the one without if? Please paste the whole trace if possible.

[Tamu]

here is all the console log :

[Info] [webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled. (vendors-node_modules_webpack-dev-server_client_index_js_protocol_ws_3A_hostname_0_0_0_0_port_-a5d60f.2649ddd3284f15ce65eb.bundle.js, line 963)
[Debug] DEBUG [aurelia] – "Loading plugin aurelia-templating-binding." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [aurelia] – "Configured plugin aurelia-templating-binding." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [aurelia] – "Loading plugin aurelia-templating-resources." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [aurelia] – "Configured plugin aurelia-templating-resources." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [aurelia] – "Loading plugin aurelia-event-aggregator." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [aurelia] – "Configured plugin aurelia-event-aggregator." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [aurelia] – "Loading plugin aurelia-history-browser." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [aurelia] – "Configured plugin aurelia-history-browser." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [aurelia] – "Loading plugin aurelia-templating-router." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [aurelia] – "Configured plugin aurelia-templating-router." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [aurelia] – "Loading plugin resources/index." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [aurelia] – "Configured plugin resources/index." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [aurelia] – "Loading plugin aurelia1-fast-adapter." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [aurelia] – "Configured plugin aurelia1-fast-adapter." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [aurelia] – "Loading plugin aurelia-testing." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [aurelia] – "Configured plugin aurelia-testing." (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [templating] – "importing resources for aurelia-templating-resources" – [] (0) (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Debug] DEBUG [templating] – "importing resources for aurelia-templating-router" – [] (0) (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Info] INFO [aurelia] – "Aurelia Started" (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2576)
[Debug] DEBUG [templating] – "importing resources for app.html" – ["app.css"] (1) (vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.2649ddd3284f15ce65eb.bundle.js, line 2566)
[Log] fast-text-field : changing – "te" (app.2649ddd3284f15ce65eb.bundle.js, line 74)
[Log] fast-text-field : changing – "test" (app.2649ddd3284f15ce65eb.bundle.js, line 74, x3)
[Log] fast-text-field : changing – "test" (app.2649ddd3284f15ce65eb.bundle.js, line 74)
[Log] fast-text-field : changing – "test1" (app.2649ddd3284f15ce65eb.bundle.js, line 74)
[Log] fast-text-field : changing – "test1" (app.2649ddd3284f15ce65eb.bundle.js, line 74)
[Log] fast-text-field – "test1" (app.2649ddd3284f15ce65eb.bundle.js, line 70)

[ben-girardet]

Hi @bigopon and @Tamu

I confirm that there is a new issue with iOS 16 when observing properties in Aurelia 1. The aurelia1-fast-adapter that you helped me write a long time ago doesn't work anymore (only in iOS 16).

In the file aurelia-fast-adapter.ts, in iOS 16 the getObserver() on line 140 is never called.

Any help on this matter is very appreciated.

[jded76]

I searched further on the problem, and if I'm right (because I don't know the internals of aurelia) the problem is not at the detached event, but at the creation of the View.

I had a breakpoint at this this line (aurelia-templating - ViewFactory - create), hit refresh on the browser and at the first hit of the breakpoint I saw that on Chrome the template has a valid document but on Safari it has an about:blank document (see attached pictures).

@bigopon do you have any idea? Am I on the right track?
Thank you

Chrome

Safari

[bigopon]

@jded76 this.template can have null for ownerDocument, but after the document.adoptNode call, it should have the right ownerDocument. Can you check further after that?

[jded76]

I saw that all the views have on fragment property the about:blank on Safari, even before the detached event. That led me there. I wanted to find why we have different behavior between Safari and Chrome. As you can see on Chrome has already the right document.

You can see here, after DOM.adoptNode the content is about:blank document

[bigopon]

@jded76 right, thanks. I guess you have replicated the bug. Safari 16 document.adoptNode when called on DocumentFragment stopped working the way it did before. Maybe it's time to file a bug with Safari/webkit team. I'm not sure where the place is.

[bigopon]

A test can be like this I think

const div = document.createElement('div')
div.innerHTML = '<template><button>';

const fragment = div.firstChild.content;
console.assert(fragment.ownerDocument === null)

document.adoptNode(fragment);
console.assert(fragment.ownerDocument === document);

With Safari 16, it'll fail while it'll succeed with Safari < 16

[jded76]

I just found that the source has the right document, but the source.content has the wrong one at this line.

[bigopon]

That is expected, before .adoptNode call, it'll likely have a different owner document. If it still does after the .adoptNode call then that's the change/bug.