Posisi flickering iPhone lengket

10

Mengikuti sedikit kode saya. Hanya ingin tahu mengapa sel "iPhone" berkedip hanya dari iPhone. PS. Saya tidak bisa menggunakan tabel atau daftar untuk struktur. Saya juga mencoba menggunakan transform: translate3d(0,0,0);.

Pada dasarnya saya membutuhkan sel pertama untuk menjadi lengket baik untuk Kiri dan Atas pada iPhone dan iPad juga. Saya ingin melakukan itu menggunakan HTML dan CSS saja.

PENTING

Tolong, jangan jawab dengan solusi tetap , saya tidak tahu di mana meja akan ditempatkan di tubuh. Akan ada tajuk, beberapa konten, dll.

Tampilkan cuplikan kode

html css Vixed
sumber
Apakah Anda memeriksa cuplikan kode ini dengan iPhone yang sebenarnya? karena sepertinya tidak masalah bagi saya.
Sanira
Tentu saja saya melakukan @Sanira
Vixed
Mungkin ada hubungannya dengan ini: github.com/ampproject/amphtml/issues/…
BugsArePeopleToo
1
@BugsArePeopleToo tampaknya tidak menjadi masalah yang sama. Maksudku, aku punya masalah dengan sel saja, tidak dengan semua.
Vixed
@ Diperbaharui Anda ingin tetap hanya satu sel atau seluruh sel dari baris pertama tabel?
Deepu Reghunath

Jawaban:

8

Saya melawan keanehan dengan iOS vs yang lainnya sepanjang waktu. Ini biasanya melibatkan masalah konteks susun. Tampak bagi saya bahwa elemen position: stickydan left: 0menjadi relatif terhadap baris pertama di iOS. iOS tidak menangani konteks penumpukan yang sama dengan semua browser lainnya.

Saya tidak pernah benar-benar tahu persis apa yang menyebabkan ini. Secara teknis sel iPhone Anda macet ke kiri bahkan ketika sedang bergulir karena itu relatif terhadap induknya yang tidak memilikinya left: 0. Saya berasumsi ini ada hubungannya dengan bagaimana iOS menangani position: sticky. Sticky mulai relatif dan kemudian berubah menjadi diperbaiki. Semua browser lain pada saat itu akan membuatnya tetap di kiri. Anda memiliki position: sticky;elemen di dalam position: sticky;elemen. Itu adalah konteks susun baru. Saya percaya iOS membuatnya tetap untuk orang tuanya dan bukan seperti yang Anda harapkan. Karena baris induk tidak punyaleft: 0itu akan bergulir dengan yang lainnya. Saya harap ini membantu. Saya tidak melihat kerlipan, tetapi saya memiliki beberapa komponen yang rusak dalam kerangka web perusahaan saya setelah iOS 13 keluar yang melibatkan konteks pengguliran dan penumpukan. Saya akan menguji pada beberapa perangkat iOS.

sunting setelah bermain-main lagi dengan itu, saya yakin itu adalah masalah konteks susun. Saya memutar indeks-z hingga 1000 hanya pada sel iphone dan baris di bawah MASIH muncul di atasnya.

masukkan deskripsi gambar di sini

Jika Anda tidak harus mendukung internet explorer, saya akan menggunakan kisi-kisi CSS untuk mencapai tata letak ini. Maka Anda tidak perlu khawatirposition: sticky

https://css-tricks.com/snippets/css/complete-guide-grid/

https://css-tricks.com/using-css-grid-the-right-way/

Saya menggunakannya untuk data dinamis konten berat dalam aplikasi bisnis sehingga bisa sangat fleksibel jika dimanfaatkan dengan baik.

Diperbarui Lagi - Jika Anda tidak dapat mengubah DOM sama sekali maka Anda harus berurusan dengan kedipan karena bahkan solusi kisi akan membutuhkan pembungkus di sekitar beberapa elemen. Hanya untuk memperjelas .... Dengan solusi kisi, Anda TIDAK perlu tahu berapa banyak kolom atau baris yang akan Anda miliki. Anda sepertinya menutup telepon pada aspek itu. Area kisi juga menciptakan konteks susun baru dan membuat segalanya relatif terhadap area kisi yang ada di dalamnya sekaligus memungkinkan unit yang fleksibel. Saya tidak bisa memberikan jawaban sampai Anda menunjukkan bagaimana data dinamis Anda masuk. Kami membutuhkan lebih banyak konteks untuk memberikan solusi kode kepada Anda.

Sekali lagi, kerlipan ini terjadi karena Anda memiliki elemen lengket di dalam elemen lengket lainnya. Itu hanya iOS dan jika Anda ingin menggunakannya seperti ini, Anda harus menghadapinya saja.

Berikut dokumentasi tentang menumpuk konteks dan cara kerjanya. Seperti yang saya nyatakan dalam komentar, Anda harus mengambil pendekatan yang berbeda atau hanya menghadapinya.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Juga -

Sembunyikan limpahan pada HTML dan Tubuh Anda. Letakkan pembungkus di sekitar meja. Masukan -webkit-overflow-scrolling: autoke bungkusnya. Jalankan di iOS 12 dan Anda akan melihatnya tidak berkedip. Anda tidak akan memiliki momentum bergulir. iOS13 menghapus kebutuhan untuk -webkit-overflow-scrollingsehingga Anda bahkan tidak bisa menimpanya . Jika Anda memberi nilai touchpada -webkit-overflow-scrollingAnda sekarang akan mendapatkan berkedip. Jalankan kode ini di bawah dan Anda akan melihatnya tidak berkedip. Singkat cerita, seperti yang telah saya katakan berkali-kali Anda HARUS menemukan pendekatan yang berbeda. Anda tidak dapat memperbaiki ini sekarang karena iOS13 sedang keluar dan Anda benar-benar tidak ingin menonaktifkan momentum bergulir.

html {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.wrapper {
  overflow: auto;
  -webkit-overflow-scrolling: auto;
  width: 100%;
  height: 100%;
}
.table {
  width: 2000px;
  position: relative;
}

.tr {
  overflow: visible;
  display: block;
  white-space: nowrap;
  font-size: 0;
}

.tc {
  border: 1px solid #DDD;
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 12px;
}

.trh {
  background: #000;
  color: #FFF;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tc.first {
  background: #000;
  color: #FFF;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
}
<html>
  <head>
    <link rel="stylesheet" href="css.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="wrapper">
      <div class="table">
          <div class="tr trh">
            <div class="tc first">Iphone</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">2</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
        </div>
    </div>
  </body>
</html>
Luaskan cuplikan

Brett Parsons
sumber
Hai Brett, terima kasih atas jawaban Anda. Sayangnya saya tidak dapat menggunakan "kisi" karena jumlah baris dan kolomnya dinamis. Jika saya akan menggunakan grid maka saya harus mengelolanya dengan beberapa JS dan saya tidak bisa.
Vixed
Anda dapat menggunakannya dengan konten dinamis. Saya melakukannya setiap hari. Jika saya mendapat waktu hari ini saya akan memperbarui jawaban saya dengan beberapa kode.
Brett Parsons
Grid CSS akan membuat apa yang disebut trek grid implisit dan konten akan ditempatkan di sepanjang template eksplisit yang Anda tetapkan. Saya telah melakukan beberapa hal gila dengan tata letak dinamis menggunakannya.
Brett Parsons
Saya tidak tahu jumlah kolomnya. Lebarnya bukan 100vw, tapi semakin banyak!
Vixed
Terima kasih atas klarifikasi tentang apakah Anda perlu mendukung IE atau tidak. Sekarang saya bisa menghabiskan waktu untuk menunjukkan kepada Anda.
Brett Parsons
-1

Jika Anda mengatur ulang elemen, Anda dapat mencapai ini.

body {
  margin: 0;
  position: absolute;
  height: 100%;
  width: 100%;
}

.table {
  position: relative;
  width: 100%;
  height: 100%;
}

.tr {
  overflow: visible;
  display: block;
  white-space: nowrap;
  font-size: 0;
}

.tc {
  border: 1px solid #DDD;
  display: inline-block;
  width: 100px;
  min-height: 100px;
  text-align: center;
  font-size: 12px;
}

.trh,
.tc.first {
  background: #000;
  color: #FFF;
}

.table {
  overflow: hidden;
}

.table-body {
  display: flex;
  height: calc(100% - 102px);
}

.row-head {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-content {
  width: calc(100% - 102px);
  height: 100%;
  overflow: scroll;
}
<div class="table">
  <div class="tr trh">
    <div class="tc first">Iphone</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
  </div>
  <div class="table-body">
    <div class="row-head">
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
    </div>
    <div class="table-content">
      <div class="tr">
        <div class="tc">1</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">2</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
    </div>
  </div>
</div>
Luaskan cuplikan

Deepu Reghunath
sumber
Terima kasih Deepu, tapi pasti lengket, tidak tetap, karena saya tidak tahu di mana meja akan muncul.
Vixed
Menambahkan penjelasan dalam pertanyaan.
Vixed
@Vixed Saya telah memperbarui solusinya
Deepu Reghunath
Saya melihat, tetapi Anda mengubah semua dom. Seperti yang saya katakan, saya tidak bisa melakukan itu.
Vixed
@Vixed Saya menjawab pertanyaan Anda, Silakan periksa solusi yang saya posting, saya membuat saya lengket.
darligee