Позиция: липкий элемент, который вложен в другой липкий элемент, не работает в Edge

Question

Я пытаюсь разработать таблицу с фиксированным заголовком и фиксированными столбцами столбцов.Я использую position: sticky для этого, и он хорошо работает в Chrome / Safari / Firefox, но я обнаружил проблему в Microsoft Edge.

Если вы создаете элемент с position:sticky; top: 0; и вставляете другой элемент с position: sticky; left: 0;, Edgeигнорирует вложенный элемент.

Откройте этот пример в Edge и проверьте следующее: https://codepen.io/finethanks/pen/aRWByx

Это ошибка Edge?

.wrapper {
  border: 1px solid #ccc;
  width: 200px;
  height: 200px;
  overflow: auto;
}

.content {
  width: 1000px;
  height: 1000px;
}

.sticky-wrapper {
  height: 30px;
  background: red;
  position: sticky;
  top: 0;
}

.item {
  width: 50px;
  height: 20px;
  background: yellow;
  position: sticky;
  left: 0;
}

<div class="wrapper">
  <div class="content">
    <div class="sticky-wrapper">
      <div class="item"></div>
    </div>
  </div>
</div>

Answer 1

«закрепленное» значение не поддерживается в версии Edge меньше 16.

Пожалуйста, посмотрите совместимость браузера свойства position css по этой ссылке: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Browser_compatibility