简体繁体 English

Ionic V5 与 Safari 上的 Angular 组件问题

[英]Ionic V5 with Angular component issue on Safari

原文 2020-10-29 05:46:53 6 1 angular/ safari/ ionic5

I am facing issue with the Ionic PWA application for click issue on Safari for below UI components.我正面临 Ionic PWA 应用程序的问题，用于在 Safari 上点击以下 UI 组件的问题。

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

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 MacOs：Catalina 10.15.7 (19H2) Safari：版本 14.0 (15610.1.28.1.9, 15610) Angular：9.1.6 Ionic：5.0.0

Any support will be appreciated.任何支持将不胜感激。 Thanks in advance.提前致谢。

1 个解决方案

It's a bug with latest Safari and ionic 5.这是最新的 Safari 和 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.问题是与ion-item ，只需添加<div tabindex="0"></div>内部ion-item ，它会解决这个问题。

Long Explanation (Copied from the github issue below): GitHub Issue: https://github.com/ionic-team/ionic-framework/issues/21939#issuecomment-694259307长说明（从下面的github问题复制）： GitHub问题： 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.在 Safari/iOS 测试版中有一个回归，其中如果没有可聚焦的子元素，带有 delegatesFocus: true 的 web 组件会导致浏览器崩溃。 The underlying issue was that WebKit was not checking if the focusable element existed prior to forwarding focus.潜在的问题是 WebKit 在转发焦点之前没有检查可聚焦元素是否存在。 This affects the ion-item component as delegatesFocus: true is used.这会影响 ion-item 组件，因为使用了 delegatesFocus: true。

The issue was resolved and code to fix the issue was merged;问题已解决，并合并了解决问题的代码； however, the fix has not shipped in Safari for macOS.但是，该修复程序尚未在 macOS 的 Safari 中提供。 As a result, this issue will still appear when Safari 14 for macOS is released.因此，当 macOS 的 Safari 14 发布时，此问题仍然会出现。 This fix has shipped in iOS 14, so devices running that version of iOS are not affected.此修复程序已在 iOS 14 中提供，因此运行该版本 iOS 的设备不受影响。

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). Ionic Framework 团队已验证该问题已在最新的 Safari 技术预览版中得到解决，这表明此修复程序应在即将发布的 Safari 更新（即 Safari 14.0.1 或最终版本）中提供。 We will follow up on this thread when the fix has been released.修复发布后，我们将跟进此线程。