Положення липке iPhone мерехтіння

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

В основному мені потрібна перша клітинка, яка буде липкою і для лівих, і для верхніх для iPhone та iPad. Я хотів би це зробити лише за допомогою HTML та CSS.

ВАЖЛИВО

Будь ласка, не відповідайте фіксованими рішеннями, я не знаю, де буде розміщений стіл у тілі. Буде заголовок, деякий вміст тощо тощо

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

.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;
}

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

Розгорніть фрагмент

html css

— Вікс
джерело

Ви перевірили цей фрагмент коду на фактичному iPhone? бо мені це здається нормальним

— Саніра

Звичайно, я зробив @Sanira

— Vixed

Ймовірно, щось стосується цього: github.com/ampproject/amphtml/isissue/…

— BugsArePeopleToo

@BugsArePeopleToo, схоже, не є однією проблемою. Я маю на увазі, що у мене проблема лише з клітиною, а не з усіма.

— Vixed

@Vixed Ви хочете вставити лише одну клітинку або всю клітинку першого ряду таблиці?

— Deepu Reghunath

Відповіді:

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

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

відредагувати, погравши ще дещо з цим, я впевнений, що це складна проблема контексту. Я прокрутив z-індекс до 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 та Body. Покладіть обгортку навколо столу. Надіньте -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>

Розгорніть фрагмент

— Бретт Парсонс
джерело

Привіт Бретт, дякую за вашу відповідь. На жаль, я не можу використовувати "сітку", оскільки кількість рядків та стовпців є динамічними. Якщо я буду використовувати сітку, то мені доведеться керувати нею, а я не можу.

— Вікс

Ви можете використовувати його з динамічним контентом. Я роблю це щодня. Якщо я отримаю час сьогодні, я оновлю свою відповідь деяким кодом.

— Бретт Парсонс

CSS-сітки зроблять так звані неявні сітки та вміст буде розміщено уздовж явного шаблону, який ви визначаєте. Я зробив деякі шалені речі з динамічними макетами, використовуючи його.

— Бретт Парсонс

Я не знаю кількість стовпців. Ширина не 100ВВт, але все більше і більше!

— Вікс

Дякуємо за роз’яснення щодо того, потрібно підтримувати 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>

Розгорніть фрагмент

— Deepu Reghunath
джерело

Дякую Деепу, але він повинен бути липким, а не виправленим, оскільки я не знаю, де з’явиться таблиця.

— Вікс

Додано пояснення у запитання.

— Вікс

@Vixed Я оновив рішення

— Deepu Reghunath

Я бачив, але ти змінив увесь дім. Як я вже сказав, я не можу цього зробити.

— Вікс

@Vixed Я відповів на ваше запитання. Будь ласка, будь ласка, перевірте рішення, яке я опублікував, я зробив свою липкою.

— darligee