Ustaw migające migające iPhone'a

10

Po małym fragmencie mojego kodu. Zastanawiam się tylko, dlaczego komórka „iphone” miga tylko z telefonu iPhone. PS. Nie mogę użyć tabeli ani listy dla struktury. Próbowałem też użyć transform: translate3d(0,0,0);.

Zasadniczo potrzebuję, aby pierwsza komórka była lepka zarówno dla Lewej, jak i Górnej na iPhonie i iPadzie. Chciałbym to zrobić tylko przy użyciu HTML i CSS.

WAŻNY

Proszę nie odpowiadać ustalonymi rozwiązaniami, nie wiem, gdzie stół zostanie umieszczony w ciele. Będzie nagłówek, niektóre treści itp.

Pokaż fragment kodu

html css Vixed
źródło
Czy sprawdziłeś ten fragment kodu na prawdziwym iPhonie? ponieważ wydaje mi się to w porządku.
Sanira
Oczywiście zrobiłem @Sanira
Vixed
Prawdopodobnie coś z tym zrobić: github.com/ampproject/amphtml/issues/…
BugsArePeopleToo
1
@BugsArePeopleToo nie wydaje się być tym samym problemem. Mam na myśli, że mam problem tylko z komórką, nie ze wszystkimi.
Vixed
@Vixed czy chcesz przykleić tylko jedną komórkę czy całą komórkę pierwszego rzędu tabeli?
Deepu Reghunath,

Odpowiedzi:

8

Cały czas walczę z dziwactwami na iOS. Zwykle wiąże się to ze stosowaniem problemów kontekstowych. Wydaje mi się, że element position: stickyi left: 0staje się względny w stosunku do pierwszego wiersza w systemie iOS. iOS nie obsługuje kontekstu stosu tak samo, jak wszystkich innych przeglądarek.

Nigdy tak naprawdę nie odkryłem dokładnie, co to powoduje. Technicznie rzecz biorąc, twoja komórka iPhone'a utknęła w lewo nawet podczas przewijania, ponieważ jest względna w stosunku do swojego rodzica, który nie ma left: 0. Zakładam, że ma to związek z tym, jak radzi sobie iOS position: sticky. Sticky zaczyna się od względnego, a następnie zmienia się na fixed. Wszystkie inne przeglądarki w tym momencie zatrzymałyby się w lewo. Masz position: sticky;element wewnątrz position: sticky;elementu. To jest nowy kontekst stosowy. Wierzę, że iOS sprawia, że ​​jest ustawiony na nadrzędny, a nie w oczekiwany sposób. Ponieważ wiersz nadrzędny nie maleft: 0przewinie się ze wszystkim innym. Mam nadzieję, że to pomoże. Nie widziałem żadnego migotania, ale miałem kilka zepsutych komponentów w frameworku sieciowym mojej firmy po pojawieniu się iOS 13 obejmującego przewijanie i układanie kontekstów. Testowałbym na wielu urządzeniach z iOS.

edytuję po tym, jak jeszcze trochę z tym pogadałem, jestem pewien, że jest to problem kontekstowy. Podkręciłem indeks Z do 1000 tylko na komórce iPhone'a, a wiersze poniżej STILL pojawiają się nad nim.

wprowadź opis zdjęcia tutaj

Jeśli nie musisz obsługiwać Internet Explorera, skorzystałbym z siatek CSS, aby osiągnąć ten układ. Wtedy nie będziesz musiał się martwićposition: sticky

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

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

Używam go do dynamicznej zawartości dużych ilości danych w aplikacjach biznesowych, dzięki czemu może być niewiarygodnie elastyczny, jeśli zostanie odpowiednio wykorzystany.

Zaktualizowałem ponownie - jeśli nie możesz w ogóle zmienić DOM, będziesz musiał poradzić sobie z migotaniem, ponieważ nawet rozwiązanie gridowe będzie wymagało owijania wokół niektórych elementów. Tylko dla wyjaśnienia .... Dzięki rozwiązaniu gridowemu NIE musisz wiedzieć, ile kolumn lub wierszy będziesz mieć. Wyglądasz na rozłączonego w tym aspekcie. Obszary siatki również tworzą nowy kontekst stosu i sprawiają, że wszystko zależy od obszaru siatki, w którym się znajduje, jednocześnie umożliwiając elastyczne jednostki. Nie mogę ci odpowiedzieć, dopóki nie pokażesz, jak przychodzą twoje dynamiczne dane. Potrzebujemy więcej kontekstu, aby dać ci rozwiązanie kodu.

Ponownie migotanie ma miejsce, ponieważ masz lepki element umieszczony w innym lepkim elemencie. To tylko iOS i jeśli chcesz go używać w ten sposób, będziesz musiał sobie z tym poradzić.

Oto dokumentacja na temat zestawiania kontekstów i ich działania. Jak powiedziałem w komentarzu, będziesz musiał zastosować inne podejście lub po prostu sobie z tym poradzić.

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

Również --

Ukryj przepełnienie HTML i treści. Połóż opakowanie wokół stołu. Załóż -webkit-overflow-scrolling: autoopakowanie. Uruchom go na iOS 12, a zobaczysz, że nie miga. Jednak nie będziesz mieć przewijania. iOS13 usunął tę potrzebę, -webkit-overflow-scrollingwięc nie można jej nawet przesłonić. Jeśli nałożysz wartość touchna, -webkit-overflow-scrollingzaczniesz migotać. Uruchom ten kod poniżej, a zobaczysz, że nie miga. Krótko mówiąc, jak już wielokrotnie mówiłem, będziesz musiał znaleźć inne podejście. Nie możesz tego naprawić teraz, gdy iOS13 jest niedostępny i naprawdę nie chciałbyś w ogóle wyłączyć przewijania pędu.

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>
Rozwiń fragment kodu

Brett Parsons
źródło
Cześć Brett, dziękuję za odpowiedź. Niestety nie mogę użyć „siatki”, ponieważ liczba wierszy i kolumn jest dynamiczna. Jeśli użyję siatki, będę musiał zarządzać nią za pomocą JS i nie mogę.
Vixed
Możesz go używać z zawartością dynamiczną. Robię to codziennie. Jeśli otrzymam dzisiaj czas, zaktualizuję swoją odpowiedź kodem.
Brett Parsons
Siatki CSS utworzą tak zwane niejawne ścieżki siatki, a zawartość zostanie umieszczona wzdłuż zdefiniowanego szablonu, który zdefiniujesz. Zrobiłem z niego szalone rzeczy z użyciem dynamicznych układów.
Brett Parsons
Nie znam liczby kolumn. Szerokość to nie 100vw, ale coraz więcej!
Vixed
Dziękujemy za wyjaśnienie, czy potrzebujesz obsługi IE, czy nie. Teraz mogę spędzić czas, aby ci pokazać.
Brett Parsons
-1

Jeśli zmienisz układ elementów, możesz to osiągnąć.

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>
Rozwiń fragment kodu

Deepu Reghunath
źródło
Dzięki Deepu, ale musi być lepka, nie naprawiona, ponieważ nie wiem, gdzie pojawi się stół.
Vixed
Dodano wyjaśnienie w pytaniu.
Vixed
@Vixed Zaktualizowałem rozwiązanie
Deepu Reghunath,
Widziałem, ale zmieniłeś cały dom. Jak powiedziałem, nie mogę tego zrobić.
Vixed
@Vixed Odpowiedziałem na twoje pytanie, uprzejmie sprawdź rozwiązanie, które opublikowałem, moje zrobiło się lepkie.
darligee