title: Nested "position: sticky" element not sticking in Safari, but works in iframe
body: <p>I'm using CSS <code>position: sticky</code> to stick some elements to my page. I'm using <code>&lt;div&gt;</code>s to produce a grid-like structure (<code>&lt;table&gt;</code>s aren't appropriate to my use case). Please note that this is specifically a <code>position: sticky</code> question - I'm not looking for a Javascript solution, and I believe that <code>position: sticky</code> <em>should</em> work as desired based on the spec and the behaviour in other browsers.</p>
  
  <p>I need to stick a row for vertical scrolling, and the first cell in that row for horizontal scrolling. If I use <code>position: sticky; left: 0;</code> on the first cell <em>without</em> sticking the row, the cell sticks to the left just fine. However, <strong>in Safari</strong> if I use eg.</p>
  
  <pre><code>.row {
      position: sticky;
      top: 10px;
      width: ...
  }
  .cell {
      position: sticky;
      left: 0;
      width: ...
  }
  </code></pre>
  
  <p>the <em>row</em> sticks when vertically scrolling as desired but the <em>cell</em> does not stick when horizontally scrolling.</p>
  
  <p>The code behaves as desired in Chrome and Firefox, <strong>and</strong> <em>in an <code>iframe</code> in Safari</em>.</p>
  
  <p>Here's some code for a minimal example:</p>
  
  <p>CSS:</p>
  
  <pre><code>.row {
      position: -webkit-sticky;
      position: sticky;
      top: 10px;
      white-space: nowrap;
      width: 2000px;
      z-index: 30;
  }
  .cell {
      display: inline-block;
      width: 100px;
  }
  .sticky {
      position: -webkit-sticky;
      position: sticky;
      left: 0;
      font-weight: bold;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="cell sticky"&gt;Sticky&lt;/div&gt;
      &lt;div class="cell"&gt;Content&lt;/div&gt;
      &lt;div class="cell"&gt;Content&lt;/div&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Uploaded files here (can't use codepen/jsfiddle as they load into an iframe):</p>
  
  <p><a href="https://qcn.github.io/minimal_sticky.html" rel="nofollow noreferrer">https://qcn.github.io/minimal_sticky.html</a> Minimal example: doesn't work in Safari, works in Chrome/Firefox</p>
  
  <p><a href="https://qcn.github.io/minimal_sticky_iframe.html" rel="nofollow noreferrer">https://qcn.github.io/minimal_sticky_iframe.html</a> The same minimal example loaded into an iframe: does work in Safari!</p>
  
  <p>Another interesting thing I noticed was that if I scroll the page horizontally and then refresh, the sticky cell renders at the left of the viewport, and then scrolls normally in that position (ie. it still doesn't stick, but it knows where it should have been on page load!). This and the fact that the behaviour works inside an iframe and in other browsers makes me suspect it's a browser bug, but I'm unable to find other references to it.</p>