Posiziona lo sfarfallio dell'iPhone appiccicoso

10

Di seguito un piccolo pezzo del mio codice. Mi chiedo solo perché il cellulare "iphone" sfarfalla solo da iPhone. PS. Non posso usare una tabella o un elenco per la struttura. Ho anche provato a usare transform: translate3d(0,0,0);.

Fondamentalmente ho bisogno che la prima cella sia appiccicosa sia per Left che Top su iPhone e iPad. Vorrei farlo usando solo HTML e CSS.

IMPORTANTE

Per favore, non rispondere con soluzioni fisse , non so dove verrà posizionato il tavolo nel corpo. Ci sarà un'intestazione, alcuni contenuti, ecc. Ecc.

Mostra snippet di codice

html  css 
— Vixed
fonte
Hai controllato questo snippet di codice con un iPhone reale? perché mi sembra OK.
— Sanira,
Ovviamente ho fatto @Sanira
— Vixed il
Probabilmente qualcosa a che fare con questo: github.com/ampproject/amphtml/issues/…
— BugsArePeopleToo
1
@BugsArePeopleToo non sembra essere lo stesso problema. Voglio dire, ho un problema solo con una cella, non con tutto.
— Vixed,
@Vissato vuoi incollare solo una cella o l'intera cella della prima riga della tabella?
— Deepu Reghunath,

Risposte:

8

Combatto le stranezze con iOS vs tutto il resto tutto il tempo. Di solito comporta problemi di accatastamento del contesto. Mi sembra che l' elemento position: stickye left: 0diventi relativo a quella prima riga su iOS. iOS non gestisce il contesto di impilamento come tutti gli altri browser.

Non ho mai capito esattamente cosa causi questo. Tecnicamente il tuo cellulare iPhone è bloccato a sinistra anche quando sta scorrendo perché è relativo al suo genitore che non ha left: 0. Suppongo che questo abbia a che fare con il modo in cui iOS gestisce position: sticky. Sticky inizia relativo e poi passa a fisso. Tutti gli altri browser a quel punto lo farebbero rimanere sulla sinistra. Hai un position: sticky;elemento dentro un position: sticky;elemento. Questo è un nuovo contesto di accatastamento. Credo che iOS lo renda fisso al suo genitore e non come ti aspetteresti. Dal momento che la riga padre non haleft: 0scorrerà con tutto il resto. Spero che questo possa essere d'aiuto. Non ho visto sfarfallio, ma ho avuto alcuni componenti rotti nel framework web della mia azienda dopo che iOS 13 è uscito con contesti di scrolling e stacking. Vorrei testare su più dispositivi iOS.

modifica dopo averci provato un po 'di più, sono sicuro che si tratti di un problema di sovrapposizione. Ho attivato l'indice z fino a 1000 solo sulla cella dell'iPhone e le righe sotto STILL appaiono sopra di esso.

inserisci qui la descrizione dell'immagine

Se non dovessi supportare Internet Explorer, utilizzerei le griglie CSS per ottenere questo layout. Quindi non dovrai preoccupartiposition: sticky

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

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

Lo uso per dati dinamici con contenuti pesanti nelle applicazioni aziendali, quindi può essere incredibilmente flessibile se sfruttato correttamente.

Aggiornato di nuovo - Se non riesci affatto a cambiare il DOM, dovrai affrontare lo sfarfallio poiché anche la soluzione di griglia richiederà involucri attorno ad alcuni elementi. Giusto per chiarire .... Con una soluzione a griglia NON devi sapere quante colonne o righe avrai. Mi sembri appeso a quell'aspetto. Le aree della griglia creano anche un nuovo contesto di accatastamento e rendono tutto relativo all'area della griglia in cui si trova consentendo unità flessibili. Non posso darti una risposta finché non mostrerai come arrivano i tuoi dati dinamici. Abbiamo bisogno di più contesto per darti una soluzione di codice.

Ancora una volta, lo sfarfallio sta avvenendo perché hai un elemento appiccicoso posizionato all'interno di un altro elemento appiccicoso. Questo è solo iOS e se vuoi usarlo in questo modo, dovrai affrontarlo.

Ecco la documentazione sui contesti di impilamento e su come funzionano. Come ho affermato in un commento, dovrai adottare un approccio diverso o semplicemente affrontarlo.

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

Anche --

Nascondi l'overflow sul tuo HTML e Body. Metti un involucro attorno al tavolo. Indossa -webkit-overflow-scrolling: autola confezione. Eseguilo su iOS 12 e non vedrai sfarfallio. Tuttavia, non avrai slancio. iOS13 ha rimosso la necessità di -webkit-overflow-scrollingquindi non puoi nemmeno ignorarlo. Se si mette il valore di touchsu -webkit-overflow-scrolling, ora si avrà uno sfarfallio. Esegui questo codice qui sotto e vedrai che non lampeggerà. Per farla breve, come ho già detto molte volte, dovrai trovare un approccio diverso. Non puoi risolvere questo problema ora che iOS13 è uscito e non avresti davvero voluto disabilitare lo scorrimento del momentum comunque.

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>
Espandi frammento

— Brett Parsons
fonte
Ciao Brett, grazie per la tua risposta. Sfortunatamente non posso usare la "griglia" poiché il numero di righe e colonne è dinamico. Se userò la griglia, dovrò gestirla con alcuni JS e non posso.
— Vixed,
Puoi usarlo con contenuti dinamici. Lo faccio tutti i giorni. Se avrò tempo oggi aggiornerò la mia risposta con un po 'di codice.
— Brett Parsons,
Le griglie CSS renderanno quelle che vengono chiamate tracce della griglia implicite e il contenuto verrà posizionato lungo il modello esplicito definito. Ho fatto alcune cose folli con layout dinamici che lo utilizzano.
— Brett Parsons,
Non conosco il numero di colonne. La larghezza non è 100vw, ma sempre di più!
— Vixed,
Grazie per il chiarimento sull'opportunità o meno di supportare IE. Ora posso passare il tempo per mostrarti.
— Brett Parsons,
-1

Se riorganizzi gli elementi, puoi farlo.

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>
Espandi frammento

— Deepu Reghunath
fonte
Grazie Deepu, ma deve essere appiccicoso, non risolto, dal momento che non so dove apparirà il tavolo.
— Vixed,
Aggiunta spiegazione nella domanda.
— Vixed,
@Vixed Ho aggiornato la soluzione
— Deepu Reghunath il
Ho visto, ma hai cambiato tutto il dom. Come ho detto, non posso farlo.
— Vixed,
@ Risolto Ho risposto alla tua domanda, ti preghiamo gentilmente di controllare la soluzione che ho pubblicato, ho reso il mio appiccicoso.
— darligee,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.