a barra de menus do safari IOS entra em conflito com os botões em 10% da tela

14

Estou construindo um portal da web que deve ser funcional e bonito em várias plataformas. Uma das plataformas é o IOS Safari, e foi nesse caso que encontrei um problema. No meu código, alinhar dois botões flutuantes na parte inferior de uma div com uma largura e altura de 100%. Tudo funciona bem e meus botões são exibidos exatamente como deveriam na parte inferior da página. No entanto, quando clico nos botões, a visualização compacta do safari móvel muda para a visualização completa e meus botões ficam ocultos atrás da barra de navegação inferior!

É um comportamento normal do safari mobile exibir o menu expandido quando o usuário toca nos 10% inferiores da tela? Como posso evitar isso?

Neste gif, você pode ver o problema no simulador IOS: exemplo
Como você pode ver, o problema ocorre apenas quando um botão está nos 10% inferiores da visualização. Este é apenas um botão normal. Meu código foi verificado três vezes por vários desenvolvedores e não possui erros.

ios safari development html dennismuijs
fonte
Se você listar o seu trecho de código, bandeira esta e podemos migrar para estouro de pilha ...
bmike
Eu criei um bug para o Safari, por favor, comente aqui: bugs.webkit.org/show_bug.cgi?id=194235
sheerun

Respostas:

5

Esse é um comportamento normal no Mobile Safari. Tocar na parte inferior exibe as várias opções do navegador e rola a página da Web para cima de acordo. A funcionalidade da página da Web permanece a mesma, para que o usuário ainda possa tocar no botão depois de rolar para acessar qualquer funcionalidade que tenha.

nohillside
fonte
4
Obrigado Patrix, eu sei que isso é normal, mas existe uma maneira de substituir esse comportamento através de html, css ou js? Eu já postei esta pergunta sobre estouro de pilha, mas uma vez que é algo relacionado a maçã talvez pedir-diferente saberá uma maneira
dennismuijs
1
O StackOverflow (ou mesmo um site SE em que os desenvolvedores da Web participam) é melhor para esse tipo de coisa que o AD (que é focado nos problemas do usuário final). Como acessar os controles do navegador é de alguma forma essencial para o usuário, duvido que exista uma maneira de evitar o comportamento.
nohillside
link para o estouro de pilha q & a para isso?
Ben Roberts
7

Eu acho que posso ter encontrado uma resposta. Configurando seu conteúdo para ter os seguintes estilos:

  • height: 100% (permite que o conteúdo preencha a janela de exibição e vá além da parte inferior)
  • overflow-y: scroll(permite rolar abaixo da janela de visualização; o valor padrão é visible)
  • -webkit-overflow-scrolling: touch (para suavizar qualquer comportamento de rolagem)

parece forçar o menu do iOS no Safari a sempre aparecer. Dessa forma, os cliques no botão realmente funcionarão em vez de abrir o menu Safari. Espero que isto ajude!

jennz0r
fonte
Claro, isso funciona, mas nem todos os sites podem tolerar a configuração overflow-y: scrollem sua área de conteúdo principal. Esse hack tem efeitos colaterais que afetam todos os elementos filhos. Para colocá-lo mais corretamente, essas propriedades css afetam diretamente todos os elementos filhos e forçar a exibição do menu do safari é na verdade o efeito colateral.
Zevdg 16/10/19
Obrigado. Ainda não tentei tocar na parte inferior da tela, mas pelo menos 10% do meu design não está sendo coberto pela barra de menus desagradável do Safari. Para adicionar isso, você também precisa fornecer todos os elementos que os contêm height: 100%. Para uma empresa que ganha muito dinheiro com dispositivos móveis, sua experiência na Web para dispositivos móveis é horrível.
corysimmons