position: -webkit-sticky работает только до высоты контейнера внутри дочернего элемента flexbox в Safari (12.1.1)

Question

position: -webkit-sticky делает мой элемент липким, но только до тех пор, пока мы не прокрутим до высоты контейнера. Как только мы прокручиваем высоту контейнера, sticky element прокручивается вместе со страницей. Это происходит только в Safari (я использую версию 12.1.1) и хорошо работает как в Chrome, так и в Firefox.

Я пробовал исправления, такие как self-align: flex-start, но это не решает мою проблему.

Вот код

<div class="container">
  <aside class="left">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat similique doloremque laborum ad repellendus atque, ut porro, sunt accusantium temporibus quaerat illum quis consequatur, illo numquam et? Quasi, aut corporis.
    </p>
  </aside>

  <aside class="right">
    <h1 class="sticky">Sticky Header</h1>
    <ul>
      <li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li>
      <li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li>
  </aside>

</div>

.container{
  width: 600px;
  height: 400px;
  overflow: hidden;
  display: -webkit-flex;
}

.left{
  background: cyan;
}

.right{
  background: orange;
  overflow: auto;
  height: 100%;
}

.sticky{
  position: sticky;
  position: -webkit-sticky;
  text-align: center;
  top: 0;
  background: inherit;
}

Вот ссылка на кодовый блок.

https://codepen.io/AshwinLorung/pen/QXBRRb

Откройте эту ссылку в Safari и Chrome / Firefox, чтобы увидеть разницу в поведении.

Answer 1

Пока что я решил проблему, поместив липкий элемент и содержимое в div. Но я считаю это хакерским способом. Все еще жду правильного решения.

<div class="container">
  <aside class="left">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat similique doloremque laborum ad repellendus atque, ut porro, sunt accusantium temporibus quaerat illum quis consequatur, illo numquam et? Quasi, aut corporis.
    </p>
  </aside>

  <aside class="right">
    <div class="wrapper">
      <h1 class="sticky">Sticky Header</h1>
      <ul>
        <li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li>
        <li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li>
      </ul>
    </div>
  </aside>

</div>

Answer 2

h1 имеет запас 19. * px и ему нужно установить 0. перед тем, как он станет липким, нужно прокрутить поле.Для высоты задайте ему высоту 60 пикселей и высоту строки.

.sticky{
    position: sticky;
    position: -webkit-sticky;
    text-align: center;
    margin: 0;
    height: 60px;
    line-height: 60px;
    top: 0;
    background: inherit;
}

Вы получили тот же ответ на Facebook, поэтому я не знаю, куда вы смотрите в первую очередь.