Ionic V5 com problema de componente Angular no Safari
Estou enfrentando problemas com o aplicativo Ionic PWA para problemas de clique no Safari para os componentes de IU abaixo.
ion-radio ion-select ion-menu você pode ver a captura de tela anexada quando você clica no componente do botão de opção “https://ionicframework.com/docs/api/radio 1”, na verdade ele está pedindo para recarregar a página.
Aqui estão os detalhes da versão:
MacOs: Catalina 10.15.7 (19H2) Safari: Versão 14.0 (15610.1.28.1.9, 15610) Angular: 9.1.6 Iônico: 5.0.0
Qualquer apoio será apreciado. Desde já, obrigado.
Respostas
É um bug do Safari e do ionic 5 mais recentes.
Explicação curta e solução alternativa:
O problema é com ion-item, basta adicionar <div tabindex="0"></div>dentro ion-iteme isso resolverá o problema.
Explicação longa (copiado do problema do github abaixo): Problema do GitHub:https://github.com/ionic-team/ionic-framework/issues/21939#issuecomment-694259307
O que aconteceu?
Houve uma regressão nos betas do Safari / iOS em que os componentes da web com delegatesFocus: true faziam o navegador travar se não houvesse elementos filho focalizáveis. O problema subjacente era que o WebKit não estava verificando se o elemento focalizável existia antes de encaminhar o foco. Isso afeta o componente de item de íon conforme delegatesFocus: true é usado.
O problema foi resolvido e o código para corrigi-lo foi mesclado; no entanto, a correção não foi fornecida no Safari para macOS. Como resultado, esse problema ainda aparecerá quando o Safari 14 para macOS for lançado. Essa correção foi enviada com o iOS 14, portanto, os dispositivos que executam essa versão do iOS não são afetados.
Quando a correção será lançada?
A equipe do Ionic Framework verificou que o problema foi resolvido no Safari Technology Preview mais recente, indicando que essa correção deve ser enviada em uma próxima atualização do Safari (ou seja, Safari 14.0.1 ou qualquer que seja a versão). Continuaremos neste tópico quando a correção for lançada.