Липкая первая строка и первый столбец без проблем переполнения прокрутки

Question

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

.App{
   display: grid;
   overflow: scroll;
}
.grid {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}
.row{
  display: flex;
  flex-direction: row;
}
.cell {
  width: 150px;
  height: 150px;
  flex-grow: 0;
  flex-shrink: 0;
}
.row-stick-top {
  position: sticky;
  z-index: 1;
  top: 0;
}
.cell-sticky-left {
  position: sticky;
  left: 0;
}

Вот мои коды и коробка

ПРОБЛЕМЫ Проблемы на МОБИЛЬНЫХ дисплеях. Вы можете использовать эту ссылку , чтобы просто просмотреть вывод

1) Прокручивая, вы заметите, что квадрат в левом верхнем углу не очень липкий, как будто он пытается догнать свиток. (Я пробовал это решение , но также безрезультатно)

2) Overscroll ...

• Я добавил всех родителей и даже компонент прокрутки .App:

overscroll-behavior: none;

• Я добавил overflow: hidden к html, body, #root (как уже упоминалось здесь )
• Я добавил -webkit-overflow-scrolling: touch как уже упоминалось здесь
• Я пытался body, html { position: fixed; }

Теперь я думаю, что мне нужно будет поместите мою первую строку и первый столбец в разные элементы div, которые не прокручиваются так же, как содержимое, и добавьте прослушиватель событий для прокрутки ...?