Eu tenho um site para celular que tem uma div fixada na parte inferior da tela através da posição: fixo. Tudo funciona bem no iOS 5 (estou testando em um iPod Touch) até estar em uma página com um formulário. Quando toco em um campo de entrada e o teclado virtual aparece, de repente a posição fixa do meu div é perdida. A div agora rola com a página enquanto o teclado estiver visível. Quando clico em Concluído para fechar o teclado, a div reverte para sua posição na parte inferior da tela e obedece à posição: regra fixa.
Alguém mais experimentou esse tipo de comportamento? Isso é esperado? Obrigado.
Respostas:
Eu tive esse problema no meu aplicativo. Aqui está como eu estou trabalhando nisso:
Estou apenas rolando para o topo e posicionando-o ali, para que o usuário do iOS não note nada de estranho acontecendo. Coloque isso em alguma detecção do agente do usuário para que outros usuários não obtenham esse comportamento.
fonte
document.body.scrollTop = 0
se você não estiver usando o jQuery e direcionando os navegadores mais recentes.$(window).scrollTop(0);
pode fazer com que a entrada focada seja movida para fora da tela, por exemplo, uma entrada mais abaixo na página ou se um iPhone estiver em retrato. Uma solução melhor é definir o foco e definir oheader.css({position:'absolute',top:window.pageYOffset+'px'});
desfoqueheader.css({position:'fixed',top:0});
.Eu tive um problema de ipad um pouco diferente, onde o teclado virtual empurrou minha janela de exibição para fora da tela. Depois que o usuário fechou o teclado virtual, minha janela de exibição ainda estava fora da tela. No meu caso, fiz algo como o seguinte:
fonte
Este é o código que usamos para corrigir o problema com o ipad. Ele basicamente detecta discrepâncias entre deslocamento e posição de rolagem - o que significa que 'fixo' não está funcionando corretamente.
fonte
Os elementos fixos da posição simplesmente não atualizam sua posição quando o teclado está levantado. Descobri que, enganando o Safari a pensar que a página foi redimensionada, os elementos se reposicionam. Não é perfeito, mas pelo menos você não precisa se preocupar em mudar para 'position: absolute' e o rastreamento muda você mesmo.
O código a seguir apenas escuta quando é provável que o usuário esteja usando o teclado (devido ao foco de uma entrada) e, até ouvir um borrão, apenas escuta os eventos de rolagem e, em seguida, executa o truque de redimensionamento. Parece estar funcionando muito bem para mim até agora.
fonte
Caso alguém aconteça com esse tópico, como eu fiz enquanto pesquisava esse problema. Achei esse tópico útil para estimular meu pensamento sobre esse assunto.
Esta foi a minha solução para isso em um projeto recente. Você só precisa alterar o valor de "targetElem" para um seletor jQuery que representa seu cabeçalho.
Há um pouco de atraso na correção, porque o iOS interrompe a manipulação do DOM enquanto está rolando, mas ele faz o truque ...
fonte
init
função para uma função regular (não é auto-invocável; está disparando muito cedo). Em seguida, ligueiOSKeyboardFix.init();
pouco antes do final daif
declaração.Nenhuma das outras respostas que encontrei para esse bug funcionou para mim. Consegui corrigi-lo simplesmente rolando a página de volta em 34px, a quantidade que o safari móvel rola para baixo. com jquery:
Obviamente, isso entrará em vigor em todos os navegadores, mas evita a quebra no iOS.
fonte
Esta questão é realmente irritante.
Eu combinei algumas das técnicas acima mencionadas e vim com isso:
Eu tenho duas barras de navegação fixas (cabeçalho e rodapé, usando o twitter bootstrap). Ambos agiram de forma estranha quando o teclado está ativado e estranho novamente depois que o teclado está desativado.
Com essa correção temporizada / atrasada, ela funciona. Ainda encontro uma falha de vez em quando, mas parece ser boa o suficiente para mostrá-la ao cliente.
Deixe-me saber se isso funciona para você. Caso contrário, poderemos encontrar outra coisa. Obrigado.
fonte
Eu estava enfrentando o mesmo problema com o iOS7. Os elementos fixos inferiores atrapalhariam minha visão e não o foco corretamente.
Tudo começou a funcionar quando adicionei essa metatag ao meu html.
A parte que fez a diferença foi:
Espero que ajude alguém.
fonte
Eu peguei a
Jory Cunningham
resposta e a melhorei:Em muitos casos, não é apenas um elemento que enlouquece, mas vários elementos de posição fixa; portanto, neste caso,
targetElem
deve ser um objeto jQuery que possui todos os elementos fixos que você deseja "consertar". Ho, isso parece fazer o teclado iOS desaparecer se você rolar ...Desnecessário mencionar que você deve usar este evento DEPOIS do documento
DOM ready
ou imediatamente antes da</body>
tag de fechamento .fonte
Eu tenho uma solução semelhante ao @NealJMD, exceto que a minha é executada apenas para iOS e determina corretamente o deslocamento da rolagem medindo o scollTop antes e depois da rolagem do teclado nativo, bem como usando setTimeout para permitir a rolagem nativa:
fonte
Corrigi a posição fixa do conteúdo do layout principal do Ipad desta maneira:
fonte
setInterval
... realmente? é melhor apenas para ficar com o bug do que fazendo issoEu tive um problema semelhante ao @ ds111 s. Meu site foi pressionado pelo teclado, mas não desceu quando o teclado foi fechado.
Primeiro, tentei a solução @ ds111, mas eu tinha dois
input
campos. Obviamente, primeiro o teclado desaparece, depois o desfoque acontece (ou algo assim). Então o segundoinput
estava embaixo do teclado, quando o foco mudou diretamente de uma entrada para a outra.Além disso, o "salto para cima" não foi bom o suficiente para mim, pois a página inteira tem apenas o tamanho do ipad. Então eu fiz o pergaminho suave.
Finalmente, tive que anexar o ouvinte de eventos a todas as entradas, mesmo aquelas que estavam atualmente ocultas, daí o
live
.No total, posso explicar o seguinte trecho de javascript como: Anexe o seguinte ouvinte de evento de desfoque ao atual e a todo o futuro
input
etextarea
(=live
): aguarde um período de cortesia (=window.setTimeout(..., 10)
) e role suavemente para o topo (=animate({scrollTop: 0}, ...)
), mas apenas se "não houver teclado" mostrado "(=if($('input:focus, textarea:focus').length == 0)
).Esteja ciente de que o período de carência (=
10
) pode ser muito curto ou o teclado ainda pode ser exibido, embora não estejainput
outextarea
esteja focado. Obviamente, se você quiser rolar mais rápido ou mais devagar, poderá ajustar a duração (=400
)fonte
realmente trabalhou duro para encontrar essa solução alternativa, que em resumo procura eventos de foco e desfoque nas entradas e rolagem para alterar seletivamente o posicionamento da barra fixa quando os eventos acontecem. Isso é à prova de balas e abrange todos os casos (navegando com <>, rolagem, botão pronto). Nota id = "nav" é minha div de rodapé fixo. Você pode facilmente portar isso para js ou jquery padrão. Este é dojo para quem usa ferramentas elétricas ;-)
define (["dojo / ready", "dojo / query",], função (ready, query) {
}); // final define
fonte
overflow:hidden
regra, você não verá sua entrada como está agora fora da caixa.Este é um problema difícil de acertar. Você pode tentar ocultar o rodapé no foco do elemento de entrada e mostrar o desfoque, mas isso nem sempre é confiável no iOS. De vez em quando (uma vez em dez, digamos, no meu iPhone 4S), o evento de foco parece não disparar (ou talvez exista uma condição de corrida), e o rodapé não fica oculto.
Depois de muitas tentativas e erros, descobri esta solução interessante:
Essencialmente: use JavaScript para determinar a altura da janela do dispositivo e crie dinamicamente uma consulta de mídia CSS para ocultar o rodapé quando a altura da janela diminuir em 10 pixels. Como a abertura do teclado redimensiona a exibição do navegador, isso nunca falha no iOS. Por usar o mecanismo CSS em vez do JavaScript, é muito mais rápido e suave também!
Nota: eu achei o uso de 'visibilidade: oculto' menos problemático do que 'display: none' ou 'position: static', mas sua milhagem pode variar.
fonte
Funciona para mim
fonte
No nosso caso, isso se consertaria assim que o usuário rolar. Portanto, esta é a correção que estamos usando para simular uma rolagem
blur
em qualquer uminput
outextarea
:fonte
Minha resposta é que isso não pode ser feito.
Vejo 25 respostas, mas nenhuma funciona no meu caso. É por isso que o Yahoo e outras páginas ocultam o cabeçalho fixo quando o teclado está ligado. E o Bing torna a página inteira não rolável (overflow-y: oculto).
Os casos discutidos acima são diferentes, alguns têm problemas ao rolar, outros são focados ou desfocados. Alguns têm rodapé fixo ou cabeçalho. Agora não posso testar cada combinação, mas você pode perceber que isso não pode ser feito no seu caso.
fonte
Encontrei esta solução no Github.
https://github.com/Simbul/baker/issues/504#issuecomment-12821392
Verifique se você tem conteúdo rolável.
A barra de endereço é dobrada como um bônus adicional.
fonte
Caso alguém queira tentar isso. Eu consegui o seguinte trabalhando para mim em um rodapé fixo com um campo de entrada.
fonte
Eu tenho o mesmo problema. Mas percebi que a posição fixa está apenas atrasada e não quebrada (pelo menos para mim). Aguarde de 5 a 10 segundos e veja se a div se ajusta de volta à parte inferior da tela. Eu acredito que não é um erro, mas uma resposta atrasada quando o teclado está aberto.
fonte
Eu tentei todas as abordagens desse segmento, mas se elas não ajudaram, foram ainda piores. No final, decidi forçar o dispositivo a perder o foco:
e funcionou como um encanto e corrigiu meu formulário de login fixo.
Por favor NOTA:
jQuery v1.10.2
fonte
Esse ainda é um bug grande para qualquer página HTML com os Bootstrap Modals mais altos no iOS 8.3. Nenhuma das soluções propostas acima funcionou e, após ampliar o zoom em qualquer campo abaixo da dobra de um modal alto, o Mobile Safari e / ou o WkWebView moveriam os elementos fixos para o local da rolagem do corpo HTML, deixando-os desalinhados com o local onde realmente estavam. estabelecido.
Para solucionar o erro, adicione um ouvinte de evento a qualquer uma das suas entradas modais, como:
Suponho que isso funcione porque forçar a altura de rolagem do corpo HTML realinha a exibição real com a localização do iOS 8 WebView que espera que o conteúdo da div modal modal seja.
fonte
Se alguém estava procurando uma rota completamente diferente (como você não está nem mesmo tentando fixar essa div "rodapé" ao rolar, mas deseja que a div fique na parte inferior da página), basta definir a posição do rodapé como relativo.
Isso significa que, mesmo que o teclado virtual apareça no seu navegador móvel, seu rodapé permanecerá ancorado na parte inferior da página, sem tentar reagir ao show ou fechar o teclado virtual.
Obviamente, parece melhor no Safari se a posição estiver fixa e o rodapé seguir a página enquanto você rola para cima ou para baixo, mas devido a esse bug estranho no Chrome, acabamos mudando para apenas tornar o rodapé relativo.
fonte
Nenhuma das soluções de rolagem parecia funcionar para mim. Em vez disso, o que funcionou é definir a posição do corpo como fixa enquanto o usuário estiver editando o texto e depois restaurá-lo para estático quando o usuário terminar. Isso evita que o safari role seu conteúdo para você. Você pode fazer isso no foco / desfoque do (s) elemento (s) (mostrado abaixo para um único elemento, mas pode ser para todas as entradas, áreas de texto) ou se um usuário estiver fazendo algo para começar a editar, como abrir um modal, você pode nessa ação (por exemplo, abrir / fechar modal).
fonte
iOS9 - mesmo problema.
TLDR - fonte do problema. Para solução, role para baixo
Eu tinha um formulário em um
position:fixed
iframe com id = 'subscribe-popup-frame'Conforme a pergunta original, no foco da entrada, o iframe iria para a parte superior do documento, em vez da parte superior da tela.
O mesmo problema não ocorreu no modo safari dev com o agente do usuário definido como um dispositivo de identificação. Parece que o problema é causado pelo teclado virtual do iOS quando ele aparece.
Eu obtive alguma visibilidade do que estava acontecendo registrando a posição do iframe (por exemplo
$('#subscribe-popup-frame', window.parent.document).position()
) e a partir daí pude ver que o iOS parecia estar definindo a posição do elemento para{top: -x, left: 0}
quando o teclado virtual apareceu (ou seja, focado no elemento de entrada).Então, minha solução foi pegar essa traquina
-x
, reverter o sinal e usar o jQuery para adicionar essatop
posição de volta ao iframe. Se houver uma solução melhor, eu adoraria ouvi-la, mas depois de tentar uma dúzia de abordagens diferentes, foi a única que funcionou para mim.Desvantagem: eu precisava definir um tempo limite de 500ms (talvez menos funcionasse, mas eu queria estar seguro) para garantir que eu capturasse o
x
valor final depois que o iOS fizesse seu mal com a posição do elemento. Como resultado, a experiência é muito instável. . . mas pelo menos funcionaSolução
Em seguida, basta chamar
mobileInputReposition
algo como$('your-input-field).focus(function(){})
e$('your-input-field).blur(function(){})
fonte