Embora o atributo CSS {position:fixed;}pareça (na maioria das vezes) funcionar em dispositivos iOS mais novos, é possível fazer com que o dispositivo funcione de vez {position:relative;}em quando e sem motivo ou motivo. Normalmente, limpar o cache ajudará, até que algo aconteça e a peculiaridade aconteça novamente.
Especificamente, da própria Apple Preparando o conteúdo da Web para iPad :
O Safari no iPad e o Safari no iPhone não têm janelas redimensionáveis. No Safari no iPhone e iPad, o tamanho da janela é definido como o tamanho da tela (menos os controles da interface do usuário do Safari) e não pode ser alterado pelo usuário. Para mover-se por uma página da Web, o usuário altera o nível de zoom e a posição da janela de visualização ao tocar duas vezes ou beliscar para aumentar ou diminuir o zoom ou tocar e arrastar para deslocar a página. À medida que o usuário altera o nível de zoom e a posição da viewport, ele o faz em uma área de conteúdo visível de tamanho fixo (ou seja, a janela). Isso significa que os elementos da página da Web que têm sua posição "fixa" na janela de exibição podem acabar fora da área de conteúdo visível, fora da tela.
O que é irônico, os dispositivos Android não parecem ter esse problema. Além disso, é totalmente possível usá-lo {position:absolute;}quando em referência à etiqueta do corpo e não apresentar nenhum problema.
Eu encontrei a causa raiz dessa peculiaridade; que o evento de rolagem não está funcionando bem quando usado em conjunto com a tag HTML ou BODY. Às vezes, ele não gosta de disparar o evento ou você terá que esperar até que o evento de balanço de rolagem termine para receber o evento. Especificamente, a viewport é redesenhada no final deste evento e elementos fixos podem ser reposicionados em outro lugar na viewport.
Então é isso que eu faço: ( evite usar a viewport e fique com o DOM! )
<html>
<style>
.fixed{
position:fixed;
/*you can set your other static attributes here too*/
/*like height and width, margin, etc.*/
}
.scrollableDiv{
position:relative;
overflow-y:scroll;
/*all children will scroll within this like the body normally would.*/
}
.viewportSizedBody{
position:relative;
overflow:hidden;
/*this will prevent the body page itself from scrolling.*/
}
</style>
<body class="viewportSizedBody">
<div id="myFixedContainer" class="fixed">
This part is fixed.
</div>
<div id="myScrollableBody" class="scrollableDiv">
This part is scrollable.
</div>
</body>
<script type="text/javascript" src="{your path to jquery}/jquery-1.7.2.min.js"></script>
<script>
var theViewportHeight=$(window).height();
$('.viewportSizedBody').css('height',theViewportHeight);
$('#myScrollableBody').css('height',theViewportHeight);
</script>
</html>
Em essência, isso fará com que o BODY seja do tamanho da viewport e não seja rolável. O DIV rolável aninhado no interior rolará como o BODY normalmente faria (menos o efeito de balanço, para que a rolagem pare no toque). O DIV fixo permanece fixo sem interferência.
Como observação lateral, z-indexé importante um alto valor no DIV fixo para manter o DIV rolável atrás dele. Normalmente, eu adiciono o redimensionamento de janelas e os eventos de rolagem também para compatibilidade entre navegadores e resolução de tela alternativa.
Se tudo mais falhar, o código acima também funcionará com os DIVs fixos e roláveis configurados como {position:absolute;}.