iOS não respeitando o z-index com -webkit-overflow-scrolling
No iOS, oz-index de uma área rolável é ignorado ao usar-webkit-overflow-scrolling. Se dois objetos com-webkit-overflow-scrolling sobreposição, a inferior é rolada em vez da exibida acima.
Crie dois elementos que se sobrepõem (composition: absolute por exemplo), um deles com maiorz-index e adicione
.selector
{
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
para os dois. Ambos os elementos devem ter conteúdo suficiente para rolagem.
Adicionar adicionalmente
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
para o seu<head>. Em seguida, adicione a página à sua tela inicial e inicie-a a partir daí.
Se você tentar rolar o elemento superior, o elemento abaixo será rolado.
MCVE:Como alternativa, basta verificaresta caneta. Inicie ocheio versão do seu dispositivo iOS, adicione-a à tela inicial e inicie a partir daí.
Meio Ambiente:Testado emiPhone 5 eiPhone 6 comiOS 9.1 eiOS 9.3.2
Observações:O problema ocorre apenas ao iniciar a página / aplicativo na tela inicial (aplicativo fixado) ou dentro de um Xamarin Webview (pode ter algo a ver com UIWebView e WKWebView)Depois de alterar a orientação do dispositivo (retrato / paisagem) após o carregamento da página, o problema é corrigido até que a página seja recarregada (talvez o layout que foi acionado novamente o tenha corrigido?)Alterando os elementos inferioresoverflow-y parahidden via JS corrige o problema, no entanto, alternaroverflow causa uma repintura causando problemas de desempenhoRemovendoheight: 100%; width: 100% dehtml, body resolve o problema também, no entanto, esses precisam ser definidos para que os valores percentuais funcionem corretamenteÉ necessária uma solução / solução alternativa adequada para corrigir esse problema sem causar efeitos colaterais problemáticos. Também a explicação de por que isso acontece seria apreciada.