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 或最終版本）中提供。 修復發布后，我們將跟進此線程。