Position de l'iPhone collant scintillant

10

Après un petit bout de mon code. Je me demande simplement pourquoi la cellule "iphone" scintille uniquement depuis l'iphone. PS. Je ne peux pas utiliser de table ou de liste pour la structure. J'ai aussi essayé d'utiliser transform: translate3d(0,0,0);.

Fondamentalement, j'ai besoin que la première cellule soit collante à la fois pour Left et Top sur iPhone et iPad. J'aimerais le faire uniquement en HTML et CSS.

IMPORTANT

S'il vous plaît, ne répondez pas avec des solutions fixes , je ne sais pas où la table sera placée dans le corps. Il y aura un en-tête, du contenu, etc., etc.

Afficher l'extrait de code

html css Vixed
la source
Avez-vous vérifié cet extrait de code avec un iPhone réel? parce que ça me semble OK.
Sanira
Bien sûr, j'ai fait @Sanira
Vixed
Probablement quelque chose à voir avec cela: github.com/ampproject/amphtml/issues/…
BugsArePeopleToo
1
@BugsArePeopleToo ne semble pas être le même problème. Je veux dire que j'ai un problème avec une cellule seulement, pas avec tous.
Vixed
@Vixed voulez-vous coller une seule cellule ou la cellule entière de la première ligne du tableau?
Deepu Reghunath

Réponses:

8

Je lutte contre les bizarreries avec iOS vs tout le reste tout le temps. Cela implique généralement des problèmes de contexte d'empilement. Il me semble que leposition: stickyleft: 0 élément et devient relatif à cette première ligne sur iOS. iOS ne gère pas le contexte d'empilement de la même manière que tous les autres navigateurs.

Je n'ai jamais vraiment compris exactement ce qui cause cela. Techniquement, votre cellule iPhone est bloquée à gauche même lorsqu'elle défile, car elle est relative à son parent qui ne l'a pas left: 0. Je suppose que cela a à voir avec la façon dont iOS gère position: sticky. Sticky démarre relatif puis passe à fixe. Tous les autres navigateurs à ce moment-là le feraient coller à gauche. Vous avez un position: sticky;élément à l'intérieur d'un position: sticky;élément. C'est un nouveau contexte d'empilement. Je crois qu'iOS le fixe à son parent et non pas comme on pourrait s'y attendre. Étant donné que la ligne parent n'a pasleft: 0ça va défiler avec tout le reste. J'espère que ça aide. Je n'ai vu aucun scintillement, mais j'ai eu quelques composants cassés dans le cadre Web de mon entreprise après la sortie d'iOS 13 impliquant des contextes de défilement et d'empilement. Je testerais sur plusieurs appareils iOS.

modifier après avoir joué un peu plus avec lui, je suis convaincu que c'est un problème de contexte d'empilement. J'ai monté le z-index jusqu'à 1000 sur la cellule iphone uniquement et les rangées en dessous apparaissent TOUJOURS au-dessus.

entrez la description de l'image ici

Si vous n'avez pas à prendre en charge Internet Explorer, j'utiliserais des grilles CSS pour réaliser cette mise en page. Vous n'aurez plus à vous soucierposition: sticky

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

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

Je l'utilise pour le contenu lourd de données dynamiques dans les applications commerciales, il peut donc être incroyablement flexible s'il est exploité correctement.

Mis à jour à nouveau - Si vous ne pouvez pas du tout changer le DOM, vous devrez faire face au scintillement car même la solution de grille nécessitera des wrappers autour de certains éléments. Juste pour clarifier .... Avec une solution de grille, vous n'avez PAS besoin de savoir combien de colonnes ou de lignes vous aurez. Vous semblez accroché à cet aspect. Les zones de grille créent également un nouveau contexte d'empilement et font tout par rapport à la zone de grille dans laquelle il se trouve tout en autorisant des unités flexibles. Je ne peux pas vous répondre tant que vous n'aurez pas montré comment vos données dynamiques arrivent. Nous avons besoin de plus de contexte pour vous donner une solution de code.

Encore une fois, le scintillement se produit parce que vous avez un élément positionné collant à l'intérieur d'un autre élément collant. C'est juste iOS et si vous voulez l'utiliser comme ça, vous devrez simplement vous en occuper.

Voici de la documentation sur les contextes d'empilement et leur fonctionnement. Comme je l'ai dit dans un commentaire, vous allez devoir adopter une approche différente ou simplement y faire face.

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

Aussi --

Cachez le débordement sur votre HTML et votre corps. Mettez un emballage autour de la table. Mettez -webkit-overflow-scrolling: autol'emballage. Exécutez-le sur iOS 12 et vous verrez qu'il ne scintillera pas. Cependant, vous n'aurez pas l'élan de défilement. iOS13 a supprimé la nécessité de la -webkit-overflow-scrollingpour que vous ne puissiez même pas la remplacer. Si vous mettez la valeur de touchsur, -webkit-overflow-scrollingvous obtiendrez maintenant un scintillement. Exécutez ce code ci-dessous et vous verrez qu'il ne scintillera pas. Pour faire court, comme je l'ai dit à plusieurs reprises, vous devrez trouver une approche différente. Vous ne pouvez pas résoudre ce problème maintenant que iOS13 est sorti et que vous n'auriez vraiment pas voulu désactiver le défilement de l'élan de toute façon.

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>
Développer l'extrait

Brett Parsons
la source
Salut Brett, merci pour votre réponse. Malheureusement, je ne peux pas utiliser de "grille" car le nombre de lignes et de colonnes est dynamique. Si j'utilise la grille, je devrai la gérer avec du JS et je ne peux pas.
Vixed
Vous pouvez l'utiliser avec du contenu dynamique. Je le fais tous les jours. Si j'ai le temps aujourd'hui, je mettrai à jour ma réponse avec du code.
Brett Parsons
Les grilles CSS feront ce qu'on appelle des pistes de grille implicites et le contenu sera placé le long du modèle explicite que vous définissez. J'ai fait des trucs fous avec des mises en page dynamiques en l'utilisant.
Brett Parsons
Je ne connais pas le nombre de colonnes. La largeur ce n'est pas 100vw, mais de plus en plus!
Vixed
Merci de préciser si vous devez prendre en charge IE ou non. Maintenant, je peux passer du temps à vous montrer.
Brett Parsons du
-1

Si vous réorganisez les éléments, vous pouvez y parvenir.

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>
Développer l'extrait

Deepu Reghunath
la source
Merci Deepu, mais ça doit être collant, pas fixe, car je ne sais pas où le tableau apparaîtra.
Vixed
Ajout d'explication dans la question.
Vixed
@Vixed J'ai mis à jour la solution
Deepu Reghunath
J'ai vu, mais tu as changé tout le dom. Comme je l'ai dit, je ne peux pas faire ça.
Vixed
@Vixed J'ai répondu à votre question, veuillez vérifier la solution que j'ai publiée, j'ai rendu la mienne collante.
darligee