Safari上带有Angular组件的Ionic V5问题 [英] Ionic V5 with Angular component issue on Safari

问题描述

Ionic PWA应用程序遇到了以下UI组件在Safari上的点击问题.

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

离子无线电离子选择离子菜单当您单击单选按钮组件"https://ionicframework.com/docs/api/radio 1"时，您实际上可以要求重新加载页面.

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.

以下是版本详细信息:

MacO:Catalina 10.15.7(19H2)Safari:版本14.0(15610.1.28.1.9，15610)角度:9.1.6离子性:5.0.0

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.

推荐答案

这是最新Safari和ionic 5的错误.

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

简短说明&解决方法:

问题出在 ion-item 上，只需在 ion-item内添加< div tabindex ="0"></div> ，它将解决此问题.

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

详细说明(从下面的github问题复制):GitHub问题: https://github.com/ionic-team/ionic-framework/issues/21939#issuecomment-694259307

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

发生了什么事?

在Safari/iOS Beta中存在回归，其中带有委托人焦点的Web组件:true如果没有可聚焦的子元素，则将导致浏览器崩溃.潜在的问题是，WebKit在转发焦点之前没有检查可聚焦元素是否存在.这会影响离子项组件，因为proxysFocus:使用true.

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.

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

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.

何时发布修补程序?

Ionic Framework团队已在最新的Safari技术预览版中验证了此问题已解决，表明此修复程序应在Safari的即将发布的更新中发布(即Safari 14.0.1或最终版本).修复程序发布后，我们将跟进该线程.

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.

这篇关于Safari上带有Angular组件的Ionic V5问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！