Ionic V5 与 Safari 上的 Angular 组件问题

Question

我正面临 Ionic PWA 应用程序的问题，用于在 Safari 上点击以下 UI 组件的问题。

ion-radio ion-select ion-menu 当您单击单选按钮组件“https://ionicframework.com/docs/api/radio 1”时，您可以看到附加的屏幕截图，它实际上是要求重新加载页面。

以下是版本详情：

MacOs：Catalina 10.15.7 (19H2) Safari：版本 14.0 (15610.1.28.1.9, 15610) Angular：9.1.6 Ionic：5.0.0

任何支持将不胜感激。 提前致谢。

Answer 1

这是最新的 Safari 和 ionic 5 的一个错误。

简短说明和解决方法：

问题是与ion-item ，只需添加<div tabindex="0"></div>内部ion-item ，它会解决这个问题。

长说明（从下面的github问题复制）： GitHub问题： https : //github.com/ionic-team/ionic-framework/issues/21939#issuecomment-694259307

发生了什么？

在 Safari/iOS 测试版中有一个回归，其中如果没有可聚焦的子元素，带有 delegatesFocus: true 的 web 组件会导致浏览器崩溃。 潜在的问题是 WebKit 在转发焦点之前没有检查可聚焦元素是否存在。 这会影响 ion-item 组件，因为使用了 delegatesFocus: true。

问题已解决，并合并了解决问题的代码； 但是，该修复程序尚未在 macOS 的 Safari 中提供。 因此，当 macOS 的 Safari 14 发布时，此问题仍然会出现。 此修复程序已在 iOS 14 中提供，因此运行该版本 iOS 的设备不受影响。

修复程序何时发布？

Ionic Framework 团队已验证该问题已在最新的 Safari 技术预览版中得到解决，这表明此修复程序应在即将发布的 Safari 更新（即 Safari 14.0.1 或最终版本）中提供。 修复发布后，我们将跟进此线程。