Any issues with Safari 16.0?

[nickharrisdev]

Has anyone here run into issues with form inputs (type=“email” or type=“text” specifically) failing to register that the value has changed specifically when running an Aurelia 1 application in Safari 16.0 (the latest release)?

These are the Aurelia packages and versions I’m currently using in my application:

"aurelia-animator-css": "^1.0.4",
"aurelia-bootstrapper": "^2.3.3",
"aurelia-event-aggregator": "^1.0.3",
"aurelia-framework": "^1.3.1",
"aurelia-history-browser": "^1.4.0",
"aurelia-loader-nodejs": "^1.1.0",
"aurelia-notify": "^0.8.1",
"aurelia-pal": "^1.8.2",
"aurelia-pal-nodejs": "^2.0.0",
"aurelia-polyfills": "^1.3.4",
"aurelia-router": "^1.7.1",

My application also uses a library of custom web components based on Microsoft’s Fast, so the issue may be coming from that dependency, but I wanted to reach out here as well just in case others have dealt with this issue in the last week.

Any insights you can provide would be much appreciated! Thanks.

[nenadvicentic]

I’m having weird issue with Safari 16.0 (and 16.1 beta), where most of the pages in the single page app load correctly, but some of the pages do not. After navigation they just stay blank.

I see that canActivate event triggers on the destination page, but nothing happens afterwards. At the moment I’m not sure where exactly page cycle stops.

Same app works and in latest Safari on the iPhone. (this was latest iOS 15)
Same problem occurs on Safari on iOS 16.

[cybk]

Having an error with routing for some of the pages on my Single Page App, for some reason some pages fail to load, even if activate or attached events run; the weird thing is that not happens with all the pages, the only error I see on console is

[Error] ERROR [app-router] TypeError: null is not an object (evaluating ‘t.contains’)
error
value (app-bundle-73b4d7500d.js:1:189150)
value
(anonymous function) (app-bundle-73b4d7500d.js:1:188094)
value (app-bundle-73b4d7500d.js:1:193423)
value (app-bundle-73b4d7500d.js:1:188053)

I’m still investigating, it only happens with safari 16

[nenadvicentic]

After some investigation, for our application, issue turned to be that we use Typeahead auto-complete component on several input fields.

When we navigate away from the page with Typeahead, there was a code in detached() event handler that destroys the component:

public detached() {
    // Safari 16 throws an error and stops page transition:
    $(this.myElementRef).typeahead("destroy");
}

To fix this, I moved Typeahead destruction to deactivate() event handler:

public deactivate() {
    // Safari 16 throws an error and stops page transition
    // when destroying Typeahead elements in `detached()` method.
    $(this.myElementRef).typeahead("destroy");
}

The error was the same as in @cybk 's stack trace:

TypeError: null is not an object (evaluating ‘n.contains’)

[Isoldhe]

For me the same error as @cybk was caused by the aurelia-knockout package. I created this issue for it. All pages that contained the ‘knockout’ attribute crashed in Safari 16. The conclusion was that it’s caused by KnockoutJS itself. Since there hasn’t been a new release of Knockout for 3 years, it probably won’t be fixed any time soon. So we’re replacing all Knockout with Aurelia functionality.

[jded]

We have the same problem.
I found that the first problem was with aurelia-resize and I just removed it.
But that revealed the main problem, aurelia-kendoui-bridge. I found an issue there and I made a repo with the problem with Playwright installed so you can test it on windows.

It is very strange though that the problem appeared in many libraries…

[jded]

I searched more about this, and if I’m right the problem is that the element being destroyed has an empty document (about:blank) in the ownerDocument property. In chrome has the root document.
I think that is the problem and every library that is trying to remove the element from the document is failing.
Can anyone from the aurelia team have a deeper look at this problem?

[nenadvicentic]

@jded

ownerDocument property

I’ve got exact same issue with TypeAhead, trying to access ownerDocument property throwing an error.

My guess is that this has nothing to do with Aurelia, but instead with ownerDocument property being deprecated in WebKit (macOS 10.3–10.14 Deprecated) as described here.

[huochunpeng]

That deprecation is not for JS api, it was for Swift/Obj-C api. The whole api set is deprecated, not just the single one. Apple Developer Documentation

The JS dom api still has ownerDocument in Safari v16.

[jded]

I tested with a simple aurelia page with a div with ref in the viewmodel.
In the detached event I had a breakpoint and in Chrome it had the ownerDocument filled with the right document, but in Safari 16 it had an empty document (about:blank). You can see the differences in the pictures .
Chrome:

Safari 16:

[jded]

Just for reference, in the attached event the ownerDocument has the right document both in Chrome and Safari 16.

Chrome:

Safari 16:

[huochunpeng]

Great finding!

In Aurelia 1 we only have detached callback which happened after the element is detached from DOM tree. Aurelia 2 uses different detaching callback which happens just before the element is detached from DOM tree.

The detaching is a much more proper time point to do those cleanup logic, when the element is still on the DOM tree.

It looks Safari changed the behavior on those removed element (before they are finally garbage collected).

I think it’s not hard for Aurelia 1 to gain detaching lifecycle callback. As long as we don’t remove existing detached callback from Aurelia 1, no breaking change for user’s app. cc @bigopon

[jded]

@huochunpeng

I think it’s not hard for Aurelia 1 to gain detaching lifecycle callback. As long as we don’t remove existing detached callback from Aurelia 1, no breaking change for user’s app. cc @bigopon

Yes but that means that every library has to change, to be compatible again. I don’t know if that this is the right solution.

[huochunpeng]

But without detaching callback, right now there is no way to be compatible with Safari 16. Unless it’s a router component which has deactivate callback.

[jded]

Hi, any news from the team?
You know, this is a problem that we have on production right now.
Is there anything I can do to help investigating further?

[beersandrew]

Hello,
So happy to have found this thread, we also are experiencing this and would love to hear if there are any updates from the team, or if anyone here has come up with their own fixes for now.

[huochunpeng]

Thx for @jded for the github isssue Many aurelia libraries are broken in iOS 16 · Issue #1003 · aurelia/framework · GitHub

I have one not-so-great way to partially ignore the error. Only works for route component.

<router-view swap-order="before"></router-view>

This swap order loads new route component before unloading old one. The exception still happens on the old component, error log still shows up in console, but it would not stop the new route from loading up.

[jded]

If I’m right, the change of Safari is according to the spec. So I think the libraries must adopt the new spec to be compatible again.

For me the libraries that have problems with Safari 16+ are:

1. aurelia-resize uses element-resize-detector and it’s trying to access ownerDocument.body and it’s failing.
2. aurelia-kendoui-bridge uses kendo that uses jquery and I file an issue to jquery to fix the problem. I tried it and it’s working.

[bonchien]

Any idea the side affects? This was a quick fix for my setRoot issues with the new root not loading anything on ios 16. (I think, not fully tested but definitely allows transition to a new root)

[huochunpeng]

No idea about the side effects Since it didn’t solve the exception on the previous detach, it might introduce some memory leak due to unfinished callback.