title: Position: sticky is back in Chrome 56, but the element is invisible?
body: <p>I was super happy once I knew that the sticky CSS attribute was back and supported by the latest Chrome update, but to my surprise, the element is for some reason invisible?</p>
  
  <p>The stickiness works perfectly fine, the element sticks to its predefined position as it should when the page is scrolled, but the element is totally invisible for some strange reason, so is there anyone who knows anything about this weird behaviour?</p>
  
  <p><a href="https://i.stack.imgur.com/4WHzI.png" rel="nofollow noreferrer">See screen capture</a></p>
  
  <p>I've also noticed that the sticky function stops working if a parent DIV uses the overflow: hidden attribute (normally on a page wrapper), which also was a kind of weird behaviour, because many modern websites uses scrollable DIVs and they most likely also uses a hidden drawer menu for tablet and mobile devices.</p>
  
  <p>But how about this disappearing behaviour? </p>
  
  <hr>
  
  <p>Update:</p>
  
  <p>I replicated the behaviour in Codepen and here's an example with identical HTML and CSS as used in my development example.</p>
  
  <p><a href="http://codepen.io/abstractic/pen/RKJzoR" rel="nofollow noreferrer">See codepen example</a></p>
  
  <p>I did not include all CSS, only what's needed to show the issue, and I've nailed down the problem to the social media menu in the footer, i.e. if I remove the icons (<code>&lt;i&gt;&lt;/i&gt;</code>) in that menu, the sticky sidebar appears again?</p>
  
  <pre><code>&lt;div class="social-menu"&gt;
      &lt;ul class="nav nav-pills"&gt;
          &lt;li class="nav-item"&gt;&lt;a href="" class="nav-link" itemprop="sameAs" target="_blank"&gt;&lt;i class="icon i-social-facebook i-3x"&gt;Facebook&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a href="" class="nav-link" itemprop="sameAs" target="_blank"&gt;&lt;i class="icon i-social-twitter i-3x"&gt;Twitter&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a href="" class="nav-link" itemprop="sameAs" target="_blank"&gt;&lt;i class="icon i-social-google i-3x"&gt;Google Plus&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a href="" class="nav-link" itemprop="sameAs" target="_blank"&gt;&lt;i class="icon i-social-instagram i-3x"&gt;Instagram&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>Note:</p>
  
  <p>Issue can be replicated in Chrome Version 56.0.2924.87 (64-bit)</p>
  
  <p>But works totally fine in Chrome Version 57.0.2987.21 beta (64-bit)</p>