Ionic V5 with Angular component issue on Safari

It’s a bug with latest Safari and ionic 5.

Short explanation & workaround:

The problem is with ion-item, just add <div tabindex="0"></div> inside ion-item and it will fix the issue.

Long Explanation (Copied from the github issue below): GitHub Issue: https://github.com/ionic-team/ionic-framework/issues/21939#issuecomment-694259307

What happened?

There was a regression in Safari/iOS betas where web components with delegatesFocus: true caused the browser to crash if there were no focusable child elements. The underlying issue was that WebKit was not checking if the focusable element existed prior to forwarding focus. This affects the ion-item component as delegatesFocus: true is used.

The issue was resolved and code to fix the issue was merged; however, the fix has not shipped in Safari for macOS. As a result, this issue will still appear when Safari 14 for macOS is released. This fix has shipped in iOS 14, so devices running that version of iOS are not affected.

When will the fix be released?

The Ionic Framework team has verified that the issue is resolved in the latest Safari Technology Preview, indicating that this fix should ship in an upcoming update to Safari (i.e. Safari 14.0.1 or whatever the version ends up being). We will follow up on this thread when the fix has been released.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top