Position klebriges iPhone flackert

10

Ich folge einem kleinen Teil meines Codes. Ich frage mich nur, warum die "iPhone" -Zelle nur vom iPhone flackert. PS. Ich kann keine Tabelle oder Liste für die Struktur verwenden. Ich habe es auch versucht transform: translate3d(0,0,0);.

Grundsätzlich muss die erste Zelle sowohl für Links als auch für Oben auf iPhone und iPad klebrig sein. Ich möchte das nur mit HTML und CSS machen.

WICHTIG

Bitte antworten Sie nicht mit festen Lösungen, ich weiß nicht, wo der Tisch im Körper platziert wird. Es wird einen Header, einige Inhalte usw. usw. geben.

Code-Snippet anzeigen

html  css 
— Vixed
quelle
Haben Sie diesen Code-Ausschnitt mit einem tatsächlichen iPhone überprüft? weil es mir in Ordnung erscheint.
— Sanira
Natürlich habe ich @Sanira
— Vixed
Wahrscheinlich etwas damit zu tun: github.com/ampproject/amphtml/issues/…
— BugsArePeopleToo
1
@BugsArePeopleToo scheint nicht das gleiche Problem zu sein. Ich meine, ich habe nur ein Problem mit einer Zelle, nicht mit allen.
— Vixed
@Vixed willst du nur eine Zelle oder die gesamte Zelle der ersten Tabellenzeile kleben?
— Deepu Reghunath

Antworten:

8

Ich kämpfe die ganze Zeit mit iOS gegen alles andere. Es geht normalerweise darum, Kontextprobleme zu stapeln. Es scheint mir, dass das Element position: stickyund unter left: 0iOS relativ zu dieser ersten Zeile wird. iOS behandelt den Stapelkontext nicht wie alle anderen Browser.

Ich habe nie wirklich genau herausgefunden, was dies verursacht. Technisch gesehen bleibt Ihre iPhone-Zelle auch beim Scrollen links hängen, da sie relativ zu der übergeordneten Zelle ist, die keine hat left: 0. Ich gehe davon aus, dass dies damit zu tun hat, wie iOS damit umgeht position: sticky. Sticky beginnt relativ und wechselt dann zu fest. Alle anderen Browser an diesem Punkt würden dazu führen, dass es links bleibt. Sie haben ein position: sticky;Element in einem position: sticky;Element. Das ist ein neuer Stapelkontext. Ich glaube, iOS macht es an seinem Elternteil fixiert und nicht so, wie Sie es erwarten würden. Da hat die übergeordnete Zeile nichtleft: 0es wird mit allem anderen scrollen. Ich hoffe das hilft. Ich sah kein Flackern, aber ich hatte ein paar kaputte Komponenten im Webframework meines Unternehmens, nachdem iOS 13 herauskam, das Scrollen und Stapeln von Kontexten beinhaltete. Ich würde auf mehreren iOS-Geräten testen.

Ich bin mir sicher, dass es sich um ein Problem mit dem Stapelkontext handelt, nachdem ich noch ein bisschen damit herumgespielt habe. Ich habe den Z-Index nur auf der iPhone-Zelle auf 1000 eingestellt, und die Zeilen darunter stehen NOCH darüber.

Geben Sie hier die Bildbeschreibung ein

Wenn Sie den Internet Explorer nicht unterstützen müssen, würde ich CSS-Raster verwenden, um dieses Layout zu erreichen. Dann müssen Sie sich keine Sorgen machenposition: sticky

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

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

Ich verwende es für dynamische datenintensive Inhalte in Geschäftsanwendungen, sodass es unglaublich flexibel sein kann, wenn es richtig eingesetzt wird.

Erneut aktualisiert - Wenn Sie das DOM überhaupt nicht ändern können, müssen Sie sich mit dem Flackern befassen, da selbst für die Rasterlösung einige Elemente umbrochen werden müssen. Nur zur Verdeutlichung ... Bei einer Rasterlösung müssen Sie NICHT wissen, wie viele Spalten oder Zeilen Sie haben werden. Sie scheinen in diesem Aspekt aufgehängt zu sein. Rasterbereiche erstellen auch einen neuen Stapelkontext und machen alles relativ zum Rasterbereich, in dem es sich befindet, während flexible Einheiten zugelassen werden. Ich kann Ihnen keine Antwort geben, bis Sie zeigen, wie Ihre dynamischen Daten eingehen. Wir benötigen mehr Kontext, um Ihnen eine Codelösung zu bieten.

Wieder tritt das Flackern auf, weil Sie ein klebrig positioniertes Element in einem anderen klebrigen Element haben. Das ist nur iOS und wenn Sie es so verwenden möchten, müssen Sie sich nur darum kümmern.

Hier finden Sie eine Dokumentation zum Stapeln von Kontexten und deren Funktionsweise. Wie ich in einem Kommentar sagte, müssen Sie einen anderen Ansatz wählen oder sich einfach damit befassen.

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

Ebenfalls --

Verstecken Sie den Überlauf in Ihrem HTML und Body. Legen Sie eine Hülle um den Tisch. Legen Sie -webkit-overflow-scrolling: autodie Verpackung auf. Führen Sie es unter iOS 12 aus und Sie werden sehen, dass es nicht flackert. Sie werden jedoch kein Momentum-Scrolling haben. iOS13 hat die Notwendigkeit für das entfernt, -webkit-overflow-scrollingsodass Sie es nicht einmal überschreiben können. Wenn Sie den Wert von touchauf setzen, werden -webkit-overflow-scrollingSie jetzt flackern. Führen Sie diesen Code unten aus und Sie werden sehen, dass er nicht flackert. Lange Rede, kurzer Sinn, wie ich schon oft gesagt habe, müssen Sie einen anderen Ansatz finden. Sie können dies jetzt nicht beheben, da iOS13 nicht mehr verfügbar ist und Sie das Momentum-Scrollen sowieso nicht deaktivieren wollten.

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>
Erweitern Sie das Snippet

— Brett Parsons
quelle
Hallo Brett, danke für deine Antwort. Leider kann ich "grid" nicht verwenden, da die Anzahl der Zeilen und Spalten dynamisch sind. Wenn ich Grid verwende, muss ich es mit JS verwalten und kann es nicht.
— Vixed
Sie können es mit dynamischen Inhalten verwenden. Ich mache es jeden Tag. Wenn ich heute Zeit habe, aktualisiere ich meine Antwort mit einem Code.
— Brett Parsons
CSS-Raster erstellen so genannte implizite Rasterspuren, und der Inhalt wird entlang der von Ihnen definierten expliziten Vorlage platziert. Ich habe ein paar verrückte Sachen mit dynamischen Layouts gemacht.
— Brett Parsons
Ich kenne die Anzahl der Spalten nicht. Die Breite beträgt nicht 100vw, sondern immer mehr!
— Vixed
Vielen Dank für die Klarstellung, ob Sie IE unterstützen müssen oder nicht. Jetzt kann ich die Zeit verbringen, um es Ihnen zu zeigen.
— Brett Parsons
-1

Wenn Sie die Elemente neu anordnen, können Sie dies erreichen.

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>
Erweitern Sie das Snippet

— Deepu Reghunath
quelle
Danke Deepu, aber es muss klebrig sein, nicht repariert, da ich nicht weiß, wo die Tabelle erscheinen wird.
— Vixed
Erklärung in der Frage hinzugefügt.
— Vixed
@ Vixed Ich habe die Lösung aktualisiert
— Deepu Reghunath
Ich habe gesehen, aber du hast den ganzen Dom gewechselt. Wie gesagt, das kann ich nicht.
— Vixed
@Vixed Ich habe Ihre Frage beantwortet. Bitte überprüfen Sie die Lösung, die ich gepostet habe. Ich habe meine klebrig gemacht.
— Darligee
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.