Meskipun atribut CSS {position:fixed;}tampaknya (sebagian besar) bekerja pada perangkat iOS yang lebih baru, dimungkinkan untuk memiliki kekhasan dan fallback perangkat{position:relative;} sesekali dan tanpa sebab atau alasan. Biasanya membersihkan cache akan membantu, sampai sesuatu terjadi dan kekhasan terjadi lagi.
Secara khusus, dari Apple sendiri Mempersiapkan Konten Web Anda untuk iPad :
Safari di iPad dan Safari di iPhone tidak memiliki jendela yang bisa diubah ukurannya. Di Safari di iPhone dan iPad, ukuran jendela diatur ke ukuran layar (minus kontrol antarmuka pengguna Safari), dan tidak dapat diubah oleh pengguna. Untuk bergerak di sekitar halaman web, pengguna mengubah level zoom dan posisi viewport saat mereka mengetuk dua kali atau mencubit untuk memperbesar atau memperkecil, atau dengan menyentuh dan menyeret untuk menggeser halaman. Ketika pengguna mengubah level zoom dan posisi viewport, mereka melakukannya dalam area konten yang dapat dilihat dengan ukuran tetap (yaitu, jendela). Ini berarti bahwa elemen halaman web yang posisinya "tetap" ke viewport dapat berakhir di luar area konten yang dapat dilihat, di luar layar.
Yang ironis, perangkat Android sepertinya tidak memiliki masalah ini. Juga sangat mungkin untuk digunakan{position:absolute;} ketika mengacu pada tag tubuh dan tidak memiliki masalah.
Saya menemukan akar penyebab kekhasan ini; bahwa itu adalah acara gulir yang tidak bermain bagus ketika digunakan bersama dengan tag HTML atau BODY. Terkadang tidak suka memecat acara, atau Anda harus menunggu sampai acara gulir ayun selesai untuk menerima acara. Secara khusus, viewport digambar ulang di akhir acara ini dan elemen tetap dapat diposisikan ulang di tempat lain di viewport.
Jadi ini yang saya lakukan: ( hindari menggunakan viewport, dan tetap menggunakan 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>
Intinya ini akan menyebabkan BODY menjadi ukuran viewport dan non-scrollable. DIV yang dapat digulir yang bersarang di dalam akan menggulir seperti yang biasa dilakukan BODY (dikurangi efek ayunan, sehingga penggulirannya berhenti pada touchend.) DIV yang tetap akan tetap tanpa gangguan.
Sebagai catatan, z-indexnilai tinggi pada DIV terpaku penting untuk menjaga agar DIV yang dapat digulir tetap berada di belakangnya. Saya biasanya menambahkan ukuran jendela dan gulir acara juga untuk lintas-browser dan kompatibilitas resolusi layar alternatif.
Jika semuanya gagal, kode di atas juga akan berfungsi dengan DIV yang diperbaiki dan yang dapat digulir diatur ke {position:absolute;}.