I am trying to use the html5 style property sticky in both the firefox and safari browsers but the behaviour is different when there is a table within the containing area.
Is there a way to style the table to allow the sticky element to display over the table in safari?
Here is a codepen demonstrating the behaviour.
Here is the 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;
}
And here is the 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>
The reason for the differences between the inconsistant behaviour, of the display of the html5 sticky style property, is how each of the browsers implement 'sticky' when there is a display property present or not.
Adding a
display: inline-block;
or
display: block;
as appropriate - it may affect your layout - will mitigate this.
See this codepen for a demonstraion.