Ionic V5 with Angular component issue on Safari

Question

I am facing issue with the Ionic PWA application for click issue on Safari for below UI components.

ion-radio ion-select ion-menu you can see attached screenshot when you click on radio button component “https://ionicframework.com/docs/api/radio 1” it is actually asking to reload the page.

Here are the version details:

MacOs: Catalina 10.15.7 (19H2) Safari: Version 14.0 (15610.1.28.1.9, 15610) Angular: 9.1.6 Ionic : 5.0.0

Any support will be appreciated. Thanks in advance.

Answer 1

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 (ie Safari 14.0.1 or whatever the version ends up being). We will follow up on this thread when the fix has been released.