Положение липкого iPhone мерцает

10

После небольшой части моего кода. Просто интересно узнать, почему ячейка "iphone" мигает только от iphone. PS. Я не могу использовать таблицу или список для структуры. Я также пытался использовать transform: translate3d(0,0,0);.

По сути, мне нужно, чтобы первая ячейка была липкой как для левой, так и для верхней части на iPhone и iPad. Я хотел бы сделать это, используя только HTML и CSS.

ВАЖНЫЙ

Пожалуйста, не отвечайте с фиксированными решениями, я не знаю, где таблица будет размещена в теле. Там будет заголовок, какой-то контент и тд и тп

Показать фрагмент кода

html css Vixed
источник
Вы проверяли этот фрагмент кода с реальным iPhone? потому что мне кажется, что все в порядке.
Санира
Конечно я сделал @Sanira
Vixed
Вероятно, что-то делать с этим: github.com/ampproject/amphtml/issues/…
BugsArePeopleToo
1
@BugsArePeopleToo, похоже, не та же проблема. Я имею в виду, что у меня проблема только с клеткой, а не со всеми.
Vixed
@ Vixed вы хотите вставить только одну ячейку или всю ячейку первого ряда таблицы?
Дипу Регунат

Ответы:

8

Я борюсь со странностями с iOS против всего остального все время. Обычно это связано с проблемами контекста. Мне кажется , что position: stickyи left: 0элемент становится относительно этой первой строку на прошивке. iOS не обрабатывает контекст стекирования так же, как все другие браузеры.

Я так и не понял, что именно вызывает это. Технически ваша ячейка iPhone застревает влево, даже когда она прокручивается, потому что она относительно родительской, которой нет left: 0. Я предполагаю, что это связано с тем, как работает iOS position: sticky. Липкий начинается относительно, а затем меняется на фиксированный. Все остальные браузеры в этот момент будут привязаны к левому краю. У вас есть position: sticky;элемент внутри position: sticky;элемента. Это новый стековый контекст. Я полагаю, что iOS фиксирует это на своем родителе, а не так, как вы ожидаете Так как родительская строка не имеетleft: 0это будет прокручивать со всем остальным. Надеюсь, это поможет. Я не видел мерцания, но у меня было несколько сломанных компонентов в веб-инфраструктуре моей компании после выхода iOS 13, включающей контексты прокрутки и стекирования. Я бы протестировал на нескольких устройствах iOS.

отредактируйте, поэкспериментировав с этим, я уверен, что это проблема контекстного стека. Я проворачивал z-index до 1000 только на ячейке iphone, и над ним появляются строки ниже STILL.

введите описание изображения здесь

Если вам не нужна поддержка Internet Explorer, я бы использовал CSS-сетки для создания этого макета. Тогда вам не придется беспокоиться оposition: sticky

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

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

Я использую его для динамического большого объема данных в бизнес-приложениях, поэтому он может быть невероятно гибким при правильном использовании.

Обновление снова - если вы не можете изменить DOM вообще, вам придется иметь дело с мерцанием, так как даже сеточное решение потребует оберток вокруг некоторых элементов. Просто чтобы уточнить .... С помощью сеточного решения вам НЕ нужно знать, сколько столбцов или строк у вас будет. Вы, кажется, одержимы этим аспектом. Области сетки также создают новый контекст стека и делают все относительно области сетки, в которой он находится, в то же время позволяя использовать гибкие единицы. Я не могу дать вам ответ, пока вы не покажете, как поступают ваши динамические данные. Нам нужно больше контекста, чтобы дать вам решение для кода.

Снова, мерцание происходит, потому что у вас есть липкий позиционированный элемент внутри другого липкого элемента. Это всего лишь iOS, и если вы хотите использовать его таким образом, вам придется просто разобраться с этим.

Вот документация о контекстах стека и как они работают. Как я сказал в комментарии, вам придется использовать другой подход или просто справиться с ним.

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

Также --

Скройте переполнение вашего HTML и тела. Положите обертку вокруг стола. Положите -webkit-overflow-scrolling: autoна обертку. Запустите его на iOS 12, и вы увидите, что он не мерцает. Вы не будете иметь прокрутку импульса все же. iOS13 убрал необходимость, -webkit-overflow-scrollingтак что вы даже не можете переопределить его. Если поставить значение touchна -webkit-overflow-scrollingвас будет теперь получить мерцает. Запустите этот код ниже, и вы увидите, что он не мерцает. Короче говоря, как я уже говорил много раз, вам придется искать другой подход. Вы не можете исправить это сейчас, когда iOS13 вышла, и вы действительно не хотели бы отключать прокрутку импульса в любом случае.

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>
Развернуть фрагмент

Бретт Парсонс
источник
Привет Бретт, спасибо за твой ответ. К сожалению, я не могу использовать «сетку», так как количество строк и столбцов является динамическим. Если я буду использовать grid, мне придется управлять им с помощью JS, и я не могу.
Vixed
Вы можете использовать его с динамическим контентом. Я делаю это каждый день. Если у меня будет время сегодня, я обновлю свой ответ кодом.
Брет Парсонс,
CSS-сетки создадут так называемые неявные дорожки сетки, а содержимое будет размещено по заданному вами явному шаблону. Я сделал несколько сумасшедших вещей с использованием динамических макетов.
Брет Парсонс
Я не знаю количество столбцов. Ширина это не 100vw, но все больше и больше!
Vixed
Спасибо за разъяснение, нужно ли вам поддерживать IE или нет. Теперь я могу потратить время, чтобы показать вам.
Бретт Парсонс
-1

Если вы переставите элементы, вы сможете добиться этого.

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>
Развернуть фрагмент

Дипу Регунат
источник
Спасибо Дипу, но он должен быть липким, а не фиксированным, так как я не знаю, где появится стол.
Vixed
Добавлено объяснение в вопросе.
Vixed
@ Vixed Я обновил решение
Deepu Reghunath
Я видел, но ты изменил весь дом. Как я уже сказал, я не могу этого сделать.
Vixed
@ Vixed Я ответил на ваш вопрос, пожалуйста, проверьте решение, которое я разместил, я сделал мой липким.
Дарлидж