Meus problemas com Cross-Browsing (principalmente Safari)

Ao desenvolver uma web móvel, descreverei dois problemas complexos de cross-browser e outros problemas que devem ser considerados.

Quero registrar isso.

Problema de cálculo da altura da viewport devido à barra de endereço e barra de navegação do próprio navegador

O Safari e o Samsung Internet possuem uma barra de navegação inferior integrada ao navegador. A menos que show/hide seja configurado especificamente, ele aparece ao rolar para baixo e desaparece ao rolar para cima.

O problema é que isso faz com que a viewport não seja fixa e mude.

Por exemplo, se a altura for definida como 100vh, o layout será renderizado corretamente se não houver uma barra de navegação, mas se a barra de navegação aparecer, ela cobrirá a IU.

Para resolver esse problema,

1. Use dvh.

O dvh é uma viewport dinâmica que reflete automaticamente as mudanças sempre que a altura da viewport muda. Portanto, é possível lidar com as alterações no layout da IU de acordo com a presença ou ausência da barra de endereço ou da barra de navegação inferior.

2. svh também pode ser considerado.

O svh é a altura da área da IU pura, excluindo a barra de endereço ou a barra de navegação. Em situações em que a barra de endereço ou a barra de navegação devem aparecer, usar svh é mais preciso.

Problema de deslocamento da IU devido ao teclado virtual ao selecionar (foco) a entrada

No Safari móvel, ao selecionar uma entrada, ocorreu um problema em que os elementos de IU existentes foram deslocados devido ao teclado virtual. Em outros navegadores, o teclado virtual geralmente aparece como absoluto, mas na web móvel do Safari, ele ocupa espaço como se um display block tivesse sido aplicado.

No Safari, este é um problema que ocorre quando a altura da viewport é ajustada dinamicamente quando o teclado virtual aparece, e os elementos que usam a unidade vh são reajustados. Para resolver isso,

1. Use min-height.

A altura é fixada para evitar que a IU seja deslocada.

2. Aplique prefixos de fornecedor (descrito abaixo).

Insira um atributo aplicado a navegadores específicos, como Safari.

3. Controle dinamicamente a viewport usando JavaScript.

* Este método não é recomendado. O layout pisca porque a altura de rolagem muda instantaneamente.

Um evento de redimensionamento é usado para detectar quando a viewport muda e um estilo apropriado é aplicado.

3-1. Controle a posição quando o evento focusin ocorrer.

3-2. Controle a posição quando o teclado virtual aparecer. (No exemplo abaixo, uma classe é aplicada)

É melhor resolver completamente apenas com CSS, mas se isso não resolver os casos acima, verifique se o elemento é position: absolute ou fixed e tente corrigir o CSS removendo os atributos top, right, left e bottom.

Outros

Além disso, pesquisei alguns pontos a serem considerados ao desenvolver uma web móvel para Safari.

1. Use prefixos de fornecedor ao usar alguns atributos.

* Prefixos de fornecedor são prefixos que permitem que um navegador entenda e renderize um atributo CSS específico, permitindo que o CSS implementado de forma diferente em diferentes navegadores seja aplicado conforme o pretendido. Isso garante consistência entre os mesmos navegadores e compatibilidade com navegadores mais antigos.

Tipos

-webkit-: Chrome, Safari etc.
-moz-: Mozilla Firefox
-ms-: Internet Explorer e Edge
-o-: Opera

Os atributos típicos que requerem prefixos de fornecedor são os seguintes:

Além disso, o Safari limita a capacidade de LocalStorage e SessionStorage a cerca de 5 MB e não compartilha o espaço de armazenamento entre as guias, portanto, é necessário cuidado.