title: container scrolls to top when children element height changes
body: <p>I came across a bit quirky behavior. At least it seems quirky to me.</p>
  
  <p>You can check it out here: <a href="https://fiddle.jshell.net/mxmcd9Lw/8/show/" rel="nofollow noreferrer">https://fiddle.jshell.net/mxmcd9Lw/8/show/</a></p>
  
  <p>Mainly when a element's height changes its parent element scrolls automatically to the top (you need to scroll down a bit first). Seems like offset top is lost because of the repaint that is caused by a height change.</p>
  
  <ul>
  <li>structure is based on CSS Grid</li>
  <li><code>body</code> overflow is set to hidden</li>
  <li>main container <code>.l-page</code> is set to 100vh</li>
  <li>scrolled container <code>.l-content</code></li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> body {
    overflow-y: hidden;
  }
  
  .l-page {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: 'primary_bar primary_bar' 'sidebar notification' 'sidebar secondary_bar' 'sidebar content';
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    min-width: 1280px;
    max-width: 1920px;
  }
  
  .l-notification {
    grid-area: notification;
  }
  
  .l-primary-bar {
    grid-area: primary_bar;
    z-index: 2;
  }
  
  .l-secondary-bar {
    grid-area: secondary_bar;
    z-index: 1;
  }
  
  .l-sidebar {
    grid-area: sidebar;
    width: 180px;
  }
  
  .l-content {
    grid-area: content;
    overflow-x: hidden;
    z-index: 0;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried:</p>
  
  <ul>
  <li>setting both <code>html</code> and <code>body</code> to overflow hidden</li>
  <li>setting both <code>html</code> and <code>body</code> <code>height</code>, <code>min-height</code> to 100% in different configuration</li>
  <li><a href="https://abdus.co/blog/preventing-vh-jump-on-mobile-browsers/" rel="nofollow noreferrer">https://abdus.co/blog/preventing-vh-jump-on-mobile-browsers/</a> (method 2)</li>
  </ul>
  
  <p>but with no luck.</p>
  
  <p>I am sure it has something to do with the fact that body is not scrollable and that main container's height is set to <code>100vh</code>.</p>
  
  <p><strong>Note</strong> On Chrome it jumps to the very top, on FF and Safari to the bottom.</p>
  
  <p>Any help will be highly appreciated.</p>
  
  <p><strong>Thx!</strong></p>
  
  <p>Lukas</p>