Posisi: diperbaiki tidak berfungsi di iPad dan iPhone

Saya telah berjuang dengan posisi tetap di iPad untuk sementara waktu. Saya tahu iScroll dan sepertinya tidak selalu berhasil (bahkan dalam demo mereka). Saya juga tahu bahwa Sencha memiliki perbaikan untuk itu, tetapi saya tidak dapat Ctrl+ + Fkode sumber untuk perbaikan itu.

Saya berharap seseorang dapat memiliki solusinya. Masalahnya adalah bahwa elemen-elemen yang diposisikan tetap tidak mendapatkan pembaruan ketika pengguna memindai Safari seluler bertenaga iOS.

Banyak peramban seluler sengaja tidak mendukung position:fixed;dengan alasan bahwa elemen-elemen tetap dapat menghalangi layar kecil.

Situs Quirksmode.org memiliki posting blog yang sangat bagus yang menjelaskan masalahnya: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

Lihat juga halaman ini untuk bagan kompatibilitas yang menunjukkan peramban seluler mana yang didukung position:fixed;: http://www.quirksmode.org/m/css.html

(tetapi perhatikan bahwa dunia peramban seluler bergerak sangat cepat, jadi tabel seperti ini mungkin tidak akan selalu diperbarui!)

Pembaruan: iOS 5 dan Android 4 keduanya dilaporkan memiliki posisi: dukungan tetap sekarang.

Saya menguji iOS 5 sendiri di toko Apple hari ini dan dapat mengkonfirmasi bahwa itu berfungsi dengan posisi tetap. Ada masalah dengan memperbesar dan menggeser di sekitar elemen tetap.

Saya menemukan tabel kompatibilitas ini jauh lebih terkini dan bermanfaat daripada quirksmode: http://caniuse.com/#search=fixed

Ini memiliki info terkini di Android, Opera (mini dan seluler) & iOS.

Penentuan posisi tetap tidak berfungsi di iOS seperti di komputer.

Bayangkan Anda memiliki selembar kertas (halaman web) di bawah kaca pembesar (viewport), jika Anda memindahkan kaca pembesar dan mata Anda, Anda melihat bagian halaman yang berbeda. Beginilah cara kerja iOS.

Sekarang ada selembar plastik bening dengan tulisan di atasnya, lembaran plastik ini tetap diam tidak peduli apa pun (posisi: elemen tetap). Jadi, ketika Anda memindahkan kaca pembesar, elemen tetap tampak bergerak.

Atau, alih-alih memindahkan kaca pembesar, Anda memindahkan kertas (halaman web), menjaga lembaran plastik dan kaca pembesar tetap. Dalam hal ini kata pada lembaran plastik akan tampak tetap, dan konten lainnya akan tampak bergerak (karena memang demikian) Ini adalah browser desktop tradisional.

Jadi di iOS, viewport bergerak, di browser tradisional, halaman web bergerak. Dalam kedua kasus elemen tetap tetap dalam kenyataan; meskipun di iOS elemen tetap tampak bergerak.

Cara untuk mengatasi ini, adalah dengan mengikuti beberapa paragraf terakhir di artikel ini

(pada dasarnya nonaktifkan scrolling sama sekali, isi konten dalam div yang dapat digulir terpisah (lihat kotak biru di bagian atas artikel yang ditautkan), dan elemen tetap diposisikan secara absolut)

"position: fix" sekarang berfungsi seperti yang Anda harapkan di iOS5.

Posisi: tetap tidak bekerja di android / iphone untuk pengguliran vertikal. Tetapi Anda perlu memastikan bahwa tag meta Anda telah disetel sepenuhnya. misalnya

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

Juga jika Anda berencana memiliki halaman yang sama berfungsi di android pre 4.0, Anda perlu mengatur posisi teratas juga, atau margin kecil akan ditambahkan untuk beberapa alasan.

sekarang apel mendukungnya

overflow:hidden;
-webkit-overflow-scrolling:touch;

Saya punya masalah ini di Safari (iOS 10.3.3) - browser tidak menggambar ulang sampai acara touchend dipecat. Elemen yang diperbaiki tidak muncul atau terputus.

Triknya bagi saya adalah menambahkan transform: translate3d (0,0,0); ke elemen posisi tetap saya.

.fixed-position-on-mobile {
  position: fixed;
  transform: translate3d(0,0,0);
}

EDIT - Saya sekarang tahu mengapa transformasi memperbaiki masalah: akselerasi perangkat keras. Menambahkan transformasi 3D memicu percepatan GPU yang membuat transisi menjadi lancar. Untuk lebih lanjut tentang checkout akselerasi perangkat keras, artikel ini: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css .

Footer Tetap (di sini dengan jQuery):

if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || navigator.platform == 'Linux armv6l') 
{
    window.ontouchstart = function () 
    {
        $("#fixedDiv").css("display", "none");
    }

    window.onscroll = function() 
    { 
        var iPadPosition = window.innerHeight + window.pageYOffset-45; // 45 is the height of the Footer
         $("#fixedDiv").css("position", "absolute");
         $("#fixedDiv").css("top", iPadPosition);
         $("#fixedDiv").css("display", "block");
    }
}

// in the CSS file should stand:
#fixedDiv {position: fixed; bottom: 0; height: 45px;  whatever else}

Semoga ini bisa membantu.

Hindari pada kotak yang sama menggunakan transform: --- and position: fixed. Elemen akan tetap di posisi: statis jika ada transformasi.

Saya akhirnya menggunakan jQuery Mobile v1.1 baru: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/

Kami sekarang memiliki penulisan ulang yang solid yang menyediakan bilah alat tetap yang benar pada banyak platform populer dan dengan aman kembali ke pemosisian bilah alat statis di peramban lain.

Bagian paling keren tentang pendekatan ini adalah bahwa, tidak seperti solusi berbasis JS yang memaksakan bergulir fisika tidak wajar di semua platform, bergulir kami merasa 100% asli karena ini . Ini berarti bahwa pengguliran terasa di mana-mana dan bekerja dengan input pengguna sentuh, roda mouse dan keyboard. Sebagai bonus, solusi berbasis CSS kami sangat ringan dan tidak memengaruhi kompatibilitas atau aksesibilitas.

menggunakan jquery saya bisa membuat ini. itu tidak gulir mulus, tetapi itu triknya. Anda dapat menggulir ke bawah, dan div tetap muncul di atas.

CSS

<style type="text/css">
    .btn_cardDetailsPg {height:5px !important;margin-top:-20px;}
    html, body {overflow-x:hidden;overflow-y:auto;}
    #lockDiv {
  background-color: #fff;
  color: #000;
  float:left;
  -moz-box-shadow: 0px 4px 2px 2px #ccc;-webkit-box-shadow: 0px 4px 2px 2px #ccc;box-shadow:0px 4px 2px 2px #ccc;
  }
#lockDiv.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  margin-left:0px;
  }
</style>

THE HTML

<div id="lockSticky"></div>
<div id="lockDiv">fooo</div>

THE JQUERY

<script type="text/javascript">
    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var div_top = $('#lockSticky').offset().top;
        if (window_top > div_top)
            $('#lockDiv').addClass('stick')
        else
            $('#lockDiv').removeClass('stick');
    }
    $(function() {
        $(window).scroll(sticky_relocate);
        sticky_relocate();
    });
</script>

Akhirnya kami ingin menentukan apakah ipod touch dalam mode landscape atau portrait ditampilkan sesuai

<script type="text/javascript">
    if (navigator.userAgent.match(/like Mac OS X/i)) {
        window.onscroll = function() {

        if (window.innerWidth > window.innerHeight) {
            //alert("landscape [ ]");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 268) + 'px';
        }

        if (window.innerHeight > window.innerWidth) {
            //alert("portrait ||");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 418) + 'px';
        }
        };
    }
</script>

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;}.

Cara sederhana untuk memperbaiki masalah ini cukup ketik mentransformasikan properti untuk elemen Anda. dan itu akan diperbaiki. Selamat Coding :-)

.classname{
  position: fixed;
  transform: translate3d(0,0,0);
}

Anda juga dapat mencoba caranya juga ini berfungsi dengan baik.

.classname{
      position: -webkit-sticky;
    }

Ini mungkin tidak berlaku untuk semua skenario, tetapi saya menemukan bahwa position: sticky(hal yang sama dengan position: fixed) hanya bekerja pada iPhone lama ketika wadah gulir bukan tubuh, tetapi di dalam sesuatu yang lain.

Contoh pseudo html:

body                         <- scrollbar
   relative div
       sticky div

Sticky div akan lengket di browser desktop, tetapi dengan perangkat tertentu, diuji dengan: Chromium: dev tools: emultation perangkat: iPhone 6/7/8, dan dengan Android 4 Firefox, tidak akan.

Apa yang akan berhasil adalah

body
    div overflow=auto       <- scrollbar
        relative div
            sticky div

Dalam kasus saya, itu karena elemen tetap ditampilkan dengan menggunakan animasi. Sebagaimana dinyatakan dalam tautan ini :

di Safari 9.1, memiliki posisi: elemen tetap di dalam elemen animasi, dapat menyebabkan posisi: elemen tetap tidak muncul.

inilah solusi saya untuk ini ...

CSS

#bgimg_top {
    background: url(images/bg.jpg) no-repeat 50% 0%; 
    position: fixed; 
    top:0; 
    left: 0; 
    right:0 ; 
    bottom:0;
}

HTML

<body>
<div id="bgimg_top"></div>
....
</body>

Penjelasan adalah bahwa posisi tetap untuk div akan membuat div tetap di latar belakang setiap saat, maka kami meregangkan div untuk pergi ke semua sudut browser (asalkan margin tubuh = 0) menggunakan (kiri, kanan, atas, bawah, bawah ) secara bersamaan.

Pastikan Anda tidak menggunakan lebar dan tinggi karena ini akan menimpa opsi atas, kiri, kanan, bawah.