Внедрение свойства стиля html5 с постоянным поведением

Question

Я пытаюсь использовать свойство html5 style в листинге как в браузерах firefox, так и в сафари, но поведение отличается от того, когда в области содержимого есть таблица.

Есть ли способ подгонять таблицу, чтобы липкий элемент отображался над столом в сафари?

Это codepen, демонстрирующий поведение.

Вот CSS

.sticky { 
    position: -webkit-sticky; 
    position: -moz-sticky; 
    position: -o-sticky; 
    position: -ms-sticky; 
    position: sticky; 
    top: 10px; 
    z-index: 1; 
    display: inline-block; 
    width: 100%; 
    box-sizing: border-box; 
} 

А вот HTML-

<div> 
    <h2 class="sticky">This is just sticky</h2> 
    Massa id neque aliquam vestibulum morbi blandit cursus. Elit eget gravida cum sociis natoque penatibus. Adipiscing tristique risus nec feugiat in fermentum posuere urna. Aliquet sagittis id consectetur purus ut. Nisi vitae suscipit tellus mauris a. Suspendisse sed nisi lacus sed. Sed pulvinar proin gravida hendrerit lectus a. Mauris nunc congue nisi vitae. Mi bibendum neque egestas congue quisque egestas diam. Velit aliquet sagittis id consectetur purus ut. At varius vel pharetra vel turpis nunc eget lorem dolor. Erat velit scelerisque in dictum non. Gravida arcu ac tortor dignissim convallis. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Magna eget est lorem ipsum dolor. Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat. 
    <table class="table--ledger" border="1"> 
      <tr> 
       <td>First Value</td> 
       <td>Second Value</td> 
       <td>Third Value</td> 
       <td>Fourth Value</td> 
       <td>Fifth Value</td> 
       <td>Sixth Value</td> 
       <td>Seventh Value</td> 
      </tr> 
      <tr> 
       <td>1</td> 
       <td>1</td> 
       <td>$2.75</td> 
       <td>$95.63</td> 
       <td>$62.10</td> 
       <td>$0.80</td> 
       <td>$72.79</td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>2</td> 
       <td>$2.19</td> 
       <td>$61.54</td> 
       <td>$76.07</td> 
       <td>$29.41</td> 
       <td>$98.75</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>3</td> 
       <td>$6.97</td> 
       <td>$59.19</td> 
       <td>$90.49</td> 
       <td>$20.93</td> 
       <td>$69.93</td> 
      </tr> 
      <tr> 
       <td>4</td> 
       <td>4</td> 
       <td>$3.11</td> 
       <td>$21.67</td> 
       <td>$71.98</td> 
       <td>$49.37</td> 
       <td>$71.13</td> 
      </tr> 
      <tr> 
       <td>5</td> 
       <td>5</td> 
       <td>$1.10</td> 
       <td>$95.75</td> 
       <td>$25.13</td> 
       <td>$33.41</td> 
       <td>$47.73</td> 
      </tr> 
    </table> 
</div> 


    <h1 class="vertical-space-large">here is some more text...</h1> 
<h1 class="vertical-space-large">and here is even more text...</h1> 

    <div data-lorem="p"> 
    <span class="sticky"><h2>This is sticky as well</h2></span> 
Massa id neque aliquam vestibulum morbi blandit cursus. Elit eget gravida cum sociis natoque penatibus. Adipiscing tristique risus nec feugiat in fermentum posuere urna. Aliquet sagittis id consectetur purus ut. Nisi vitae suscipit tellus mauris a. Suspendisse sed nisi lacus sed. Sed pulvinar proin gravida hendrerit lectus a. Mauris nunc congue nisi vitae. Mi bibendum neque egestas congue quisque egestas diam. Velit aliquet sagittis id consectetur purus ut. At varius vel pharetra vel turpis nunc eget lorem dolor. Erat velit scelerisque in dictum non. Gravida arcu ac tortor dignissim convallis. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Magna eget est lorem ipsum dolor. Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Ultrices in iaculis nunc sed augue lacus viverra. Consequat interdum varius sit amet mattis. Mattis pellentesque id nibh tortor id. 
Aliquam eleifend mi in nulla posuere. Fringilla est ullamcorper eget nulla facilisi etiam dignissim. Quis lectus nulla at volutpat. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. A iaculis at erat pellentesque. Faucibus in ornare quam viverra orci sagittis eu volutpat. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. Ultricies leo integer malesuada nunc vel. Erat nam at lectus urna duis convallis convallis. Ante in nibh mauris cursus mattis molestie a iaculis. Sagittis nisl rhoncus mattis rhoncus urna neque. Dolor sit amet consectetur adipiscing elit ut aliquam. Sed felis eget velit aliquet sagittis. Eget arcu dictum varius duis. Neque convallis a cras semper auctor neque vitae tempus quam. 
Turpis cursus in hac habitasse platea dictumst quisque. Velit laoreet id donec ultrices. Consequat mauris nunc congue nisi vitae suscipit tellus mauris a. Vitae et leo duis ut. Diam in arcu cursus euismod quis. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sapien pellentesque habitant morbi tristique. Nisi scelerisque eu ultrices vitae. Nunc eget lorem dolor sed viverra ipsum nunc aliquet. Sapien et ligula ullamcorper malesuada proin libero. Bibendum ut tristique et egestas. Id diam vel quam elementum pulvinar etiam non quam. 
</div> 




    <h1 class="vertical-space-large">here is some more text...</h1> 
    <h1 class="vertical-space-large">and here is even more text...</h1> 

Answer 1

Причина различий между inconsistant поведения, на дисплее html5 липкого свойства стиля , как каждый из браузеров реализует «липкий», когда присутствует свойство отображения или нет.

Добавление

display: inline-block; 

или

display: block; 

в зависимости от обстоятельств - это может повлиять на ваш макет - смягчит это.

См. Это codepen для демонстрации.