title: Element with relative height changes height/jumps on scroll (mobile)
body: <p>As the image below depicts, the height of the <code>.hero</code> div changes when scrolling past a certain point (Chrome, Android 6.0.1).</p>
  
  <p>Here is the relevant css</p>
  
  <pre><code>.hero {
      height: 100%;
      width: 100%;
      padding: .1px;
      overflow: hidden;
      position: relative;
  }
  </code></pre>
  
  <p>That image is an svg:</p>
  
  <pre><code>svg {
      height: 100px;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
  </code></pre>
  
  <p>I've come across this problem before, more often when setting height using viewport units. It's never a problem on desktop browsers (from what I can tell) and has different effects on different mobile browsers.</p>
  
  <p><a href="https://i.stack.imgur.com/xIb67.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xIb67.gif" alt="gif depicting height problem"></a></p>
  
  <p>I've gone through lots of different attempts at solutions (fiddling with positioning and display properties, wrapping elements in various ways, repositioning the image) but the problem persists and I don't know where to go next.</p>