Posisi: diperbaiki tidak berfungsi di iPad dan iPhone


132

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.


2
Sepertinya jQuery Mobile 1.1 menyelesaikan masalah ini: jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0
Tower


Kemungkinan duplikat dari beberapa pertanyaan SO. Lihat gist.github.com/avesus/… untuk detailnya.
Brian Haak

Jawaban:


66

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.


position:device-fixedakan menjadi agak berlebihan. position:fixedseharusnya hanya bekerja dengan spesifikasi W3C.
Talvi Watia

@ TalviWatia - device-fixedsolusinya bukan bagian dari jawaban saya. Mungkin atau mungkin tidak pantas sebagai saran, tetapi alasan tautannya adalah penjelasan masalah daripada solusi yang disarankannya. Bagaimanapun, banyak hal telah berubah sejak jawaban ini diposting (seperti yang saya katakan), dan banyak perangkat yang lebih baru mendukung fixed. Anda masih harus berurusan dengan perangkat lama yang tidak.
Spudley

54
Jadi saya ingin tahu, apa sebenarnya solusi Anda untuk masalah yang dihadapi? Tautan yang Anda berikan saat mungkin membantu tidak menyelesaikan masalah yang ada. Bukan untuk dikesampingkan, tetapi orang-orang cenderung memilih jawaban yang sebenarnya bukan jawaban di SO.
Talvi Watia

1
@ TalviWatia: Saat saya menulis jawabannya, sebenarnya tidak ada solusi yang baik untuk pertanyaan itu. Tautan yang saya berikan adalah diskusi terbaik yang saya tahu untuk menjelaskan mengapa segala sesuatunya seperti itu, yang tanpa adanya solusi adalah sebaik yang saya bisa tawarkan. Berbagai hal telah berubah dalam periode intervening, sehingga diskusi dalam tautan tidak lagi relevan, dan ada solusi sekarang, tetapi itulah yang terjadi pada saat itu.
Spudley

Sebenarnya posisi: tetap berfungsi untuk skala 1 tetapi ketika pengguna memperbesar iPad tidak berfungsi dengan baik. posisi: perangkat-tetap ada ?? Apakah atribut css valid untuk safari ios?
ccsakuweb

37

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.


Ada beberapa hal aneh yang terjadi dengan posisi: diperbaiki ketika Anda memperbesar iOS. Lihat stackoverflow.com/questions/52085998/…
Peter Hollingsworth

23

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.


Ini sebenarnya bekerja untuk saya. Sebelumnya, posisi: tetap pada elemen input tersembunyi (lihat navigasi layar murni css off) menyebabkan browser mogok di iphone ios 8.3 tetapi tidak pada tablet. Setelah itu berfungsi dengan baik.
Stephen Smith

Tidak berfungsi di iPad iOS 10.3, horisontal di dudukan Square. Penulis yang diberikan mengatakan pendekatan ini adalah untuk "ponsel".
SushiGuy

2
Menonaktifkan pengguna untuk memperbesar user-scalable=0, minimum-scale=1.0, maximum-scale=1.0dapat membuat halaman menjadi kurang dapat diakses oleh banyak pengguna. Akan bermanfaat untuk menambahkan peringatan tentang hal itu dalam jawaban Anda
neiya

22

sekarang apel mendukungnya

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

Ini adalah apa yang saya setelah memecahkan saya background-size: coverdan fixedmasalah pada iPad
andyb

Ini berfungsi di Mobile Safari di iOS 7. Catatan: Ini tidak akan berfungsi untuk pengguna yang belum memutakhirkan ke versi ini.
Neil Monroe

Maka harus ada beberapa variabel lain yang bekerja. Saya sudah menguji pada iOS 6 dan itu tidak berfungsi, maka pada iOS 7 dan itu.
Neil Monroe

@NeilMonroe hmm mungkin. Saya yakin saya telah melakukannya di iOS 6 tanpa masalah tetapi mungkin saya menggunakan variabel lain. jangan ingat
Uğur Özpınar

ini sangat membantu, tetapi tampaknya, overflowharus disetel kescroll

19

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 .


Ini benar-benar memperbaiki masalah pengguliran saya, itu memantul pada perangkat iOS saat menggunakan fixed, menambahkan transformdan ini diperbaiki.
vonUbisch

17

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.


7

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


6

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.


Juga cukup elegan (tapi jelas merupakan solusi) adalah metode ini untuk memungkinkan objek tetap di iOS tanpa menggunakan jQuery atau JavaScript (hanya menggunakan CSS). Ini cukup berlaku secara universal. Jika Anda ingin "mengambang"position:fixed elemen muncul di depan halaman gulir Anda, Anda hanya perlu memberinya nilai yang lebih tinggi z-indexagar tetap di depan.
Slink

ini jelas tidak menjawab pertanyaan.
Gustavo Siqueira

1

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>

1

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


1

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

0

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

0

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.


-2

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.