0

I am aware there are some similar questions but nothing that is helping me bascially what I am trying to create is a table like layout the has a sticky header and a sticky left column

So far I have created this

.container {
  height: 200px;
  width: 100%;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.row {
  min-width: 100%;
  height: 70px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.row.sticky {
  top: 0;
  position: sticky;
  position: -webkit-sticky;
  background: red;
  z-index: 10;
  min-width: 100%;
}

.row__item {
  min-width: 173px;
  height: 70px;
  border: 1px solid black;
}

.row__item.sticky {
  left: 0;
  position: -webkit-sticky;
  position: sticky;
  background: green
}
<div class="container">
  <div class="row sticky">
   <div class="row__item sticky">1</div>
   <div class="row__item">2</div>
   <div class="row__item">3</div>
   <div class="row__item">4</div>
   <div class="row__item">5</div>
   <div class="row__item">6</div>
   <div class="row__item">7</div>
   <div class="row__item">8</div>
   <div class="row__item">9</div>
  </div>
  <div class="row">
   <div class="row__item sticky">1</div>
   <div class="row__item">2</div>
   <div class="row__item">3</div>
   <div class="row__item">4</div>
   <div class="row__item">5</div>
   <div class="row__item">6</div>
   <div class="row__item">7</div>
   <div class="row__item">8</div>
   <div class="row__item">9</div>
  </div>
  <div class="row">
   <div class="row__item sticky">1</div>
   <div class="row__item">2</div>
   <div class="row__item">3</div>
   <div class="row__item">4</div>
   <div class="row__item">5</div>
   <div class="row__item">6</div>
   <div class="row__item">7</div>
   <div class="row__item">8</div>
   <div class="row__item">9</div>
  </div>
</div>

Now this works pretty well except for on IOS Safari where the top left sticky item is jittery.. I was wondering is this the best way to accomplish this, if not what else can I do? If it is how can I solve the jittering for Safari on IOS??

Does anyone have any other solutions?

Smokey Dawson
  • 8,827
  • 19
  • 77
  • 152
  • May be this can solve you problem - Add **position: -webkit-sticky;** too – Sameer Jan 09 '20 at 03:25
  • @SameerKhan sorry should of been more specific -webkit-sticky is definitely on there already – Smokey Dawson Jan 09 '20 at 03:26
  • Safari always has issues with position `fixed` or `sticky`. I don't know why they don't want to fix it. You can walk around by using `position: absolute`. Please try the solution in this answer https://stackoverflow.com/a/46597494/4254681 – Duannx Jan 09 '20 at 04:45
  • You can refer this documentation: https://datatables.net/extensions/fixedheader/examples/options/horizontal-scroll.html for fixed headers and https://datatables.net/extensions/fixedcolumns/ for fixed columns.You can then combine the scripts into one like the way you want. This will great reduce your CSS line of code. – Rohan Rao Jan 09 '20 at 09:54

0 Answers0